Tutorial

Angular: Performance Analysis with webpack Bundle Analyzer

Angular

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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.

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.js bundle:

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-analyzer plugin:

$ 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

webpack Bundle Analyzer

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:

webpack Bundle Analysis: 2

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!

Creative Commons License