Webpack Bundle Analyzer: Master Angular Optimization and Reduce Build Size by 55%

NexGenTalkDecember 3, 2024January 13, 20251156 mins

A sizable JavaScript bundle can significantly affect user experience by prolonging download and load times. This issue is particularly concerning for sizable projects that incorporate various third-party libraries and tools, potentially leading to a considerable increase in bundle size

Luckily, the webpack bundle analyzer offers a simple method to assess and enhance the build size of your Angular project. This manual will show you how to combine webpack bundle analyzer with Angular, visualize the structure of your project’s bundle, and implement methods to decrease its size.

Table of Contents

Setting Up an Angular Project for Analysis

Before we begin optimization, let’s create a sample Angular project and add a third-party library to see how it affects the bundle size.

Step 1: Create a New Angular Project

# Create a new Angular project  
$ ng new DemoProject

Step 2: Add a Third-Party Library

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

Update the app.module.ts file to add the DxDataGridModule module. Here is the revised code snippet:

import { DxDataGridModule } from 'devextreme-angular';  

@NgModule({  
  imports: [  
    BrowserModule,  
    DxDataGridModule  
  ],  
  declarations: [AppComponent],  
  bootstrap: [AppComponent]  
})  
export class AppModule {}

Step 3: Generate a Production Build

Execute the subsequent command to generate a production build:

$ npm run build

Upon completion of the execution, you will observe a dist folder that holds the build, roughly 45 MB in size.

Integrating Webpack Bundle Analyzer

It’s time to utilize webpack bundle analyzer to comprehend and enhance the bundle layout.

Step 1: Install Webpack Bundle Analyzer

Install the plugin as a dev dependency:

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

Step 2: Generate Stats File

The Angular CLI allows for the creation of a stats.json file. Include an additional script in your package.json file:

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

Run the command below to generate the stats file:

$ npm run build:stats

The stats.json file will now be found within the dist folder.

Step 3: Run Webpack Bundle Analyzer

Add an additional script in your package.json to evaluate the statistics

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

Run the following command to launch the analyzer:

$ npm run analyze

The analyzer will launch at localhost:8888 in your browser, showcasing a comprehensive visualization of your project’s bundle.

Recognizing and Addressing Bundle Problems

From the examination, you may discover that certain third-party libraries bring in superfluous modules. For example, in our project, we imported the devextreme and devextreme-angular libraries entirely, which included modules that were unnecessary, like forms and routers.

Optimization: Import Only the Required Modules

Rather than importing the whole library, modify the import statement to include just the essential modules (for instance, the grid module).

Step 1: Update the Imports

Modify your app.module.ts to import only the grid module:

import { DxGridModule } from 'devextreme-angular';

Step 2: Generate a New Production Build

Run the following command again:

$ npm run build

Check the size of the updated dist folder—it has now reduced to 20 MB, a significant improvement from the original 45 MB.

Outcomes and Summary

Through the examination of the bundle with webpack bundle analyzer and by importing only essential modules, we attained a 55% decrease in bundle size. Improving the size of the Angular build increases performance and also boosts user experience by decreasing load times.

Begin incorporating webpack bundle analyzer into your projects today to enhance your understanding of your build and optimize it efficiently!