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:
- Open the project in VS Code.
- Open the terminal and run
npm install
to install the dependencies of the project. - Run the
ng serve -o
command to start the Angular app and serve it on the browser. You should see the app, as follows: