One of the most important factors to improve the loading performance of a web app is its bundle size.Here we’ll go over how to use tool to easily analyze your app’s bundle size: webpack bundle analyzer.
First, install webpack-bundle-analyzer in your project as a dev dependency.
npm install webpack-bundle-analyzer --save-dev
Then, build your app for production using the Angular CLI and specify the --stats-json so that the webpack stats data gets exported too in the dist folder.
ng build --prod --stats-json
Next, add a new npm script that calls webpack-bundle-report in package.json file.
"bundle-report": "webpack-bundle-analyzer dist/[projectName]/stats.json"
Now, run the local webpack-bundle-analyzer against the stats.json file using npm.
npm run bundle-report
You will get the bundle report like below.
image
