How To Use webpack Bundle Analyzer for Angular Apps

Introduction

User satisfaction is affected by web performance and web performance can be affected by large bundle sizes. When we add third-party modules in our projects, each of dependencies have their own dependencies that contribute to the size of a project. If we are not utilizing all the functionality of these modules, they are contributing size to our project unnecessarily.

webpack Bundle Analyzer is a tool that can help identify modules that are used in our project and offer insight into which modules can be pruned.

In this article, you will learn how to use webpack Bundle Analyzer with Angular to analyze a project and make sensible changes to reduce the project size.

Prerequisites

To complete this tutorial, you will need:

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
• Some familiarity with setting up an Angular project.

This tutorial was verified with Node v16.2.0, npm v7.18.1, @angular/core v12.0.4, and webpack-bundle-analyzer v4.4.2.

Step 1 — Setting Up the Project

To establish a common base, we’ll create a brand new Angular application and add some dependencies.

First, use @angular/cli to create a new project:

ng new angular-bundle-analyzer-example --routing=false --style=css --skip-tests

Then, navigate to the newly created project directory:

cd angular-bundle-analyzer-example

At this point, we can run ng build to ascertain the initial size of our project.

Output
| Initial Total | 170.14 kB

This tutorial will rely upon two packages to visualize the benefits of webpack-bundle-analyzer. Use npm to install moment and firebase:

npm install moment@2.29.1 firebase@8.6.8

Open app.component.ts and import moment and firebase into our main.js bundle:

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';
import firebase from 'firebase';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const time = moment.utc();
    const firebaseConfig = {};
    firebase.initializeApp(firebaseConfig);
  }
}

To prevent a build error, we should also remove the title that is automatically generated with @angular/cli in app.component.html:

<span>{{ title }} app is running!</span>

At this point, we can run ng build to ascertain the size of our bundle:

Output
| Initial Total |  1.36 MB

Our project has grown from about 170.14 kB to 1.36 MB. We should analyze this to see what we can do to get this lower. Let’s install the webpack-bundle-analyzer plugin:

npm install --save-dev webpack-bundle-analyzer@4.4.2

Step 2 — 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": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build:stats": "ng build --stats-json",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
},

Now we can run the following command:

npm run build:stats

This command will generate stats.json file in the project’s dist directory.

Step 3 — Analyzing the Bundle

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

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build:stats": "ng build --stats-json",
  "analyze": "webpack-bundle-analyzer dist/angular-bundle-analyzer-example/stats.json",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
},

Then, run the analyzer with the following command:

npm run analyze

This command will start the webpack-bundle-analyzer:

Output
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

And the analysis will be visualized in a web browser:

Uh oh! This analysis indicates that we should do a better job of removing unused items within our bundle.

Step 4 — Applying Changes

We can revisit app.component.ts and modify it to only importing firebase from firebase/app:

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';
import firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent  implements OnInit {
  ngOnInit(): void {
    const time = moment.utc();
    const firebaseConfig = {};
    firebase.initializeApp(firebaseConfig);
  }
}

Save your changes and run the following command:

npm run build:stats

Then, run the following command:

npm run analyze

And the analysis will be visualized in a web browser:

The size of the project has changed from 1.36 MB to 563.13 kB.

Conclusion

In this article, you learned how to use webpack Bundle Analyzer with Angular to analyze a project and make sensible changes to reduce the project size.

Continue your learning with how to further reduce the project size with a custom webpack config.