Optimizing Angular Bundle Size

In this tutorial, we will see how to optimize the Angular Bundle Size and improve the loading time of the Angular application. Though there can be a number of reason why your Angular application slow loading and there are numbers of solutions also like lazy loading, server-side rendering, optimizing bundle size. In this post, we will see how we can optimize Angular bundle size.

Checking Bundle Size

Before proceeding we should know our project's bundle size. By running the command ng build --prod we can get the information about the bundle size.

This is the simple Angular CLI project and as you can see the main.js file is more than 200 kb. Now if we add our functionality and have a lot of components, modules, pipes this can go crazy and can become really big. 

In one of my company's project before optimizing the bundle size were around 2mb. So I would not argue that what should be the optimum size and all. But if you feel your initial loading time is slow then the first thing you should do is to optimize your bundle size.

So let's go through some of the important steps to reduce the bundle size and initial load time of your Angular application.

Compressing your Static Files

Compressing your static files can reduce the size of the original file and thus decrease the initial load time of your app. You can easily check if you have compressed your files or not by checking the Content-Encoding in the response headers as shown below.  

This is the response headers of https://angular.io/, where the Content-Encoding is br. The list of Content-Encoding are gzip, compress, deflate and br. If your response header does not have Content-Encoding then your browser will load the original files, so its better to have compression so that your static files will load faster.

If your Angular project is hosted in any of the cloud platforms or if you are using CDN then you should not be worried because they have handled this. But let's say you have your own server then it's better to compress it.

For example, in Node.js + ExpressJS app we will be using the following code to add compression.

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

Investigating App Module

Before doing the obvious optimization what we can do is to check the app.module.ts file. There might be a scenario where we have unused imports in our App Module. So if your Angular app bundle is too large then the first place to check is the App Module.

Along with that, we can analyze the angular bundle using webpack bundle analyzer to check if we have used any large-sized third party packages. 

To analyze the bundle,

1. Install the Webpack Bundle Analyzer using command npm install -g webpack-bundle-analyzer

2. In Angular app run ng build --stats-json which will create a file called stats.json. 

3. Finally, run webpack-bundle-alayzer full_path/stats.json, which will open the page at localhost:8888 and show an interactive visualization of the contents of all your bundles. 

Lazy Loading

We usually build our Angular apps as a collection of modules where the modules represent a cohesive block of code dedicated to certain capabilities of the app. Thus Lazy Loading benefits us by splitting the application bundle into smaller chunks that represent the code of these modules. The angular router can be used to load these smaller chunks as soon as the user navigates to the route served by the lazy loaded module. 

The Angular docs have a great article on how to set up lazy loading. 

Monitoring the Bundle Size

Our applications grow when the feature of the application increases and thus it increases our application size. We should use an Angular feature called Size Budget which will help us to set the size threshold so that it will give us warnings or errors whenever our application crosses that threshold.

You should check out Why you should Configure Size Budgets in your Angular Application to know how to configure Size Budgets in Angular Application.