To optimize your application it can be useful to investigate all the things that are loaded and used inside your webpack bundles. A great tool to visualize this information is the webpack dependency analyzer: https://www.npmjs.com/package/webpack-bundle-analyzer
From the documentation:
The Webpack dependency analyzer is a Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
This module will help you:
- Realize what's really inside your bundle
- Find out what modules make up the most of it's size
- Find modules that got there by mistake
- Optimize it!
How to use it inside your Angular app?
- Install the bundle through npm:
- npm install webpack-bundle-analyzer
- Update your package.json with an extra command:
- "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
- Invoke the command through npm
- npm run analyze
- A browser window is loaded at http://127.0.0.1:8888/