Angular Performance Analysis with webpack Bundle Analyzer

573
SHARES
2.6k
VIEWS

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.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!

Best Resources to learn Angular, Firebase and ionic 4

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending