Angular6基础(三)：使用webpack bundle analyzer(可视化)分析打包文件大小

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