![](/style/images/good.png)
![](/style/images/bad.png)
How To Use webpack Bundle Analyzer for Angular Apps
source link: https://www.digitalocean.com/community/tutorials/angular-angular-webpack-bundle-analyzer
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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:
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 [email protected] [email protected]
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 [email protected]
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK