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

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.

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!

More Articles for you

• Download Movies for Free Online: Top 10 Sites You Need to Know
• Boost Your Corporate Sector Success with Top 10 Productivity Tools
• Pushpa 2 Advance Booking Starts
• 10 Powerful Benefits of AI in Healthcare
• India GDP Growth Rate Drops to 5.4% in Q2: Is It Time for RBI to Step In?
• Amazon’s First-Ever Black Friday Sale in India