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.
Here’s a video I recorded that breaks down this very topic:
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
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
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:
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