Optimize Angular Build Size | webpack bundle analyzer

A big sized javascript bundle is never good for the user experience. A major problem being the download time as it increases the wait time for the application to get ready.

The thing is, it’s easier than ever to add third party modules and tools to our projects, but this can come with a huge performance tradeoff.

When the project is big then it becomes even more difficult to analyze the bundle (which is also having many third part libraries) and further optimize it.

This article will help to understand how can we used webpack bundle analyzer with Angular to visualize which code is coming from where.

Let’s setup one angular project, adding third part library and use webpack bundle analyzer to visualize the bundle and reduce the bundle size

Setup Angular Project

# Create a new Angular project
$ ng new DemoProject

Add third party library

$ cd DemoProject
$ npm i devextreme@20.1.7 devextreme-angular@20.1.7 --save

open app.module.ts file and add DxDataGridModule module. Below is code to add DxDataGridModule module.

Create prod build

# Generate prod build
$ npm run build

After execution of above you will notice that dist folder gets created and its size is around 45 MBs.

Now its time to setup webpack bundle analyzer

Let’s install the webpack-bundle-analyzer plugin:

$ npm i webpack-bundle-analyzer -save-dev

Building with stats.json

The Angular CLI gives us the ability to build with a stats.json out of the box. This allows us to pass this to our bundle analyzer and start the process.

We can add a new script to package.json to add this functionality:

"scripts": {
  "build:stats": "ng build --stats-json"
}

Now we can run npm run build:stats to generate a stats.json file inside of the dist folder! Let’s do that:

$ npm run build:stats

Bundle Analysis

We can make another script which runs the webpack-bundle-analyzer with the stats.json:

"scripts": {
  "analyze": "webpack-bundle-analyzer dist/DemoProject/stats.json"
}

Run the analyzer with the following command:

$ npm run analyze

You should then be able to see your analysis over at localhost:8888:

In the above picture, we can easily see that the third party libraries (devextreme & devextreme-angular) are fully imported means all the modules (grid/forms/router etc.)of these libraries are imported and are the part of prod bundle but we only wanted to use grid module.

That means we are missing something and which is also causing decent increase in prod bundle size.

Improvement here is very simple, instead of importing all modules for devextreme, we should only import grid module.

Lets do this improvement:

Now create prod build again

# Generate prod build
$ npm run build

Now check the size of dist folder, its now decreased to 20 MBs.

That means by only changing the grid module import path, the bundle size is reduced from 45 MBs to 20 MBs.

So we are able to reduce bundle size by 55% which is a huge achievement.

Great!