{"id":528,"date":"2020-10-27T13:35:51","date_gmt":"2020-10-27T12:35:51","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=528"},"modified":"2020-11-11T10:02:16","modified_gmt":"2020-11-11T09:02:16","slug":"angular-performance-analysis-with-webpack-bundle-analyzer","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/10\/27\/angular-performance-analysis-with-webpack-bundle-analyzer\/","title":{"rendered":"Angular: Performance Analysis with webpack Bundle Analyzer"},"content":{"rendered":"\n
Web performance is possibly one of the most important parts to take into account for a modern web application. The thing is, it\u2019s easier than ever to add third party modules and tools to our projects, but this can come with a huge performance tradeoff.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
New project and Adding Dependencies<\/h4>\n\n\n\n
To establish a common base, we\u2019ll create a brand new Angular application and add some dependencies:<\/p>\n\n\n\n
# Install the Angular CLI globally\n$ npm i @angular\/cli -g\n\n# Create a new Angular project of your choosen name && change directory\n$ ng new AngularBundleAnalyser\n\n> N\n> SCSS\n\n$ cd AngularBundleAnalyser\n\n$ npm i moment\n$ npm i firebase\n\n# Open this up in VS Code\n$ code . && ng serve<\/code><\/pre>\n\n\n\n
We can then head over to app.component.ts<\/code> and import these into our main.js<\/code> bundle:<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\nimport * as moment from 'moment';\nimport * as firebase * from 'firebase';\n\n@Component({\n selector: 'app-root',\n templateUrl: '.\/app.component.html',\n styleUrls: ['.\/app.component.scss']\n})\nexport class AppComponent implements OnInit {\n ngOnInit(): void {\n const time = moment.utc();\n const firebaseConfig = {};\n firebase.initializeApp(firebaseConfig);\n }\n}<\/code><\/pre>\n\n\n\n
Our bundle has gone from about 9kB to 24kB.<\/span> We should analyze this to see what we can do to get this lower. Let\u2019s install the webpack-bundle-analyzer<\/code> plugin:<\/p>\n\n\n\n
$ npm i webpack-bundle-analyzer -D<\/code><\/pre>\n\n\n\n
Building with stats.json<\/h4>\n\n\n\n
The Angular CLI gives us the ability to build with a stats.json<\/code> out of the box. This allows us to pass this to our bundle analyzer and start the process.<\/p>\n\n\n\n
We can add a new script to package.json<\/code> to add this functionality:<\/p>\n\n\n\n
Run the analyzer with the following command:<\/p>\n\n\n\n
$ npm run analyze<\/code><\/pre>\n\n\n\n
You should then be able to see your analysis over at localhost:8888<\/code>:<\/p>\n\n\n\n
Webpack Bundle Analyzer is started at http:\/\/127.0.0.1:8888 Use Ctrl+C to close it<\/p>\n\n\n\n<\/figure>\n\n\n\n
This tells us that we should do a better job of removing un-used items within our bundle. Let\u2019s see this example by only importing initializeApp<\/code> from firebase<\/code>:<\/span><\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\nimport * as moment from 'moment'\nimport { initializeApp } from 'firebase\/app'\n \/\/** code changed\n\n@Component({\n selector: 'app-root',\n templateUrl: '.\/app.component.html',\n styleUrls: ['.\/app.component.scss']\n})\nexport class AppComponent implements OnInit {\n ngOnInit(): void {\n const time = moment.utc();\n const firebaseConfig = {};\n initializeApp(firebaseConfig);\n }\n}<\/code><\/pre>\n\n\n\n
This makes the following difference within our bundle analysis:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Summary<\/h4>\n\n\n\n
Become one with your bundle. Understand what you can do to make it smaller and further-optimized. The webpack-bundle-analyzer<\/code> tool is perfect for this!<\/p>\n\n\n\n
![\"webpack](\"https:\/\/assets.digitalocean.com\/articles\/alligator\/angular\/angular-webpack-bundle-analyzer\/webpack-bundle-analysis.png\")
<\/figure>\n\n\n\n![\"webpack](\"https:\/\/assets.digitalocean.com\/articles\/alligator\/angular\/angular-webpack-bundle-analyzer\/webpack-bundle-analysis-2.png\")
<\/figure>\n\n\n\n