Analyzing bundles with webpack-bundle-analyzer

In the previous recipe, we looked at configuring budgets for our Angular app, and this is useful because you get to know when the overall bundle size exceeds a certain threshold, although you don’t get to know how much each part of the code contributes to the final bundles. This is what we call analyzing the bundles, and in this recipe, you will learn how to use webpack-bundle-analyzer to audit the bundle sizes and the factors contributing to them.

Getting ready

The app that we are going to work with resides in start/apps/chapter12/ng-perf-wba inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to build the project:

   npm run build ng-perf-wba
   

   This should build the app, and you should see the following in the terminal:

   

   Figure 12.33: The ng-perf-wba app running at...