Skip to main content

WebPack

  • WebPack
npm install --save-dev webpack-bundle-analyzer@4.4.2

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:

package.json

"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:

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