Angular: Performance Analysis with webpack Bundle Analyzer

Web performance is possibly one of the most important parts to take into account for a modern web application. 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.

This becomes even more difficult the larger a project becomes, therefore, this article looks at how to use webpack Bundle Analyzer with Angular to help visualize where code in the final bundle comes from.

Video Breakdown

Here’s a video I recorded that breaks down this very topic:

New project and Adding Dependencies

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

# Install the Angular CLI globally
$ npm i @angular/cli -g

# Create a new Angular project of your choosen name && change directory
$ ng new AngularBundleAnalyser

> N
> SCSS

$ cd AngularBundleAnalyser

$ npm i moment
$ npm i firebase

# Open this up in VS Code
$ code . && ng serve

We can then head over to app.component.ts and import these into our main.jsbundle:

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

@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);
  }
}

Our bundle has gone from about 9kB to 24kB. We should analyze this to see what we can do to get this lower. Let’s install the webpack-bundle-analyzerplugin:

$ npm i webpack-bundle-analyzer -D

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/AngularBundleAnalyser/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:

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

Uh oh. This tells us that we should do a better job of removing un-used items within our bundle. Let’s see this example by only importing initializeApp from firebase:

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment'
import { initializeApp } 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 = {};
    initializeApp(firebaseConfig);
  }
}

This makes the following difference within our bundle analysis:

Summary

Become one with your bundle. Understand what you can do to make it smaller and further-optimized. The webpack-bundle-analyzer tool is perfect for this!

#angular #webpack #web-development