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 is actually contributing 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 project we are going to work with resides in Chapter12/start_here/using-webpack-bundle-analyzer, inside the cloned repositor:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Run the ng serve -o command to start the Angular app and serve it on the browser. You should see the app, as follows:

   Figure 12.27 – App using-webpack-bundle-analyzer running at http://localhost...