Bundling in Angular

Bundling is the need of the hour as even today bloated web apps are being shipped to the production servers which really slows down the performance of the web apps & overall results in bad user experience.

Bundling -> Collection of JS packages & other assets that are packaged together for a web app. Generated by angular CLI while building the app {ng build}.

What does ng build do?

• It compiles the angular app into an output folder usually "dist" which is specified in the angular.json file along with the other configurations. This folder has all the versions of compiled, optimized, minified files along with the bundles & the assets to load etc. which can be hosted on the server.

• Internally, angular uses the "webpack" build tool.

• Compiled code is in the format of Javascript {Transpiling - ts gets converted to js}, along with the necessary HTML, CSS.

• Angular is focused upon AOT {Ahead of time} compilation where in the code gets compiled during the build so that the typescript can detect errors / issues before the app is actually served on the web.

Types of bundles -

1. Main bundle (main.js) -> It contains the application code, including all the components, services, modules of your angular app. It's the primary JS file that gets loaded when the user first visits your web app.

2. Vendor bundle (vendor.js) -> It includes 3rd party dependencies & libraries used by the app. eg. Angular packages, RxJS, external libraries etc.

Benefits of Bundling -

• Reduced HTTP Requests

• Optimized for production

• Caching - since bundles have unique names that change when the code changes. This means that when a user revisits your site, they don't need to download the entire bundle again if it hasn't changed.

• Dependency Management - Bundles help to manage the dependencies neatly. For Example, the vendor bundle contains all external dependencies, making it easier to update & manage 3rd party libraries.

Drawbacks of Bundling -

• Initial Load time -> Since, HTTP Requests are reduced, but the browser still has to download & parse all the bundle files especially with the large apps, when the bundle sizes are large too.

• Caching challenges -> In case of frequent updates to the app, user may not be able to see the latest changes until they clear the browser cache or the cache expiration time expires.

• Asset size -> Bundles can still be large if they're not optimized correctly & hence they may impact the overall performance.

How to bundle?

1. Configuration using Angular CLI - Angular.json file -> Setting up the build size warnings. This configuration imposes warnings / errors if the bundling size for the app / component reaches beyond the mentioned limits. This way we can control the size of the app, files.

   

2. By including 3rd party scripts in your bundle - This field will simply pull in an external 3rd party library / file to enhance the build.

   

3. Code Splitting - Now that we have put size related restrictions on our bundles, but how about the case when they're necessarily very large. In that case, we can go for code splitting which is nothing but Lazy Loading.

   - Lazy Loading means loading the necessary modules on & as per the demand, i.e. only when the user wishes to access only a particular route.

   - The lazy loaded module has it's own chunk / bundle.

   - The main bundle's size becomes smaller as the module is chunked into it's own file.

4. BTS {How angular does the bundling based upon the module types}

   • Eagerly Loaded Modules - Example {App module & others if we let them be!} , They're bundled in the main JS bundle.

   • Lazy Loaded Modules - Separate bundles & are loaded as per the routes accessibility, Demand - On the go!

   • Shared Modules - These are ngModules where in we declare the commonly used components, modules & services which can then be exported in our app. They act like "mini-libraries" / have shared code.

Credits -

https://www.geeksforgeeks.org/how-to-bundle-an-angular-app-for-production/

https://dev.to/christiankohler/bundling-angular-modules-4eco