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