2021-03-24

                                     angular 使用 webpack-bundle-analyzer 分析工具

 

1. 安装 webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer

2. 修改 package.json文件；（在scripts中添加 ‘bundle-report’）

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  },

3.修改angular.json文件中 ‘outputPath’字段，值改为'dist'

"outputPath": "dist",

4. 项目下运行cmd, 输入打包指令；

ng build --prod --stats-json

5.再输入指令 ' npm run bundle-report'，浏览器打开 http://127.0.0.1:8888/进行查看

 npm run bundle-report