Angular学习笔记26：使用Webpack bundle analyzer对Angular打包构建的包进行分析

对于一个项目，构建打包以后，在考虑其性能的时候，就需要明确的知道，那些插件，那些模块具体的体积是多大，还有通过nginx压缩以后的体积是多少，这个时候就可以用到Webpack bundle analyzer。

Webpack bundle analyzer链接：https://www.npmjs.com/package/webpack-bundle-analyzer

1.在项目中安装Webpack bundle analyzer

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

2.增加npm命令

在package.json文件中的scripts中增加命令：

"bundle-report": "webpack-bundle-analyzer dist/stats.json"

增加后的package.json为：

{
  "name": "demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4500",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^6.0.0",
    "viser-ng": "^2.4.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2",
    "webpack-bundle-analyzer": "^3.0.3"
  }
}

3.执行构建打包

ng build --prod --stats-json

wujiayus-MacBook-Pro:demo wjy$ ng build --prod --stats-json
 10% building modules 3/3 modules 0 active(node:62765) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead                                                                                                  Date: 2018-12-07T01:36:36.494Z               
Hash: ccc739b1c0514372c3fb
Time: 15256ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.7fb637d055581aa28d51.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.65868760e886e7e83ebe.js (main) 868 kB [initial] [rendered]

4.执行npm命令：bundle-report

5.解决报错问题：

在执行命令：bundle-report报错

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run bundle-report --scripts-prepend-node-path=auto

> [email protected] bundle-report /Users/wjy/WebstormProjects/demo
> webpack-bundle-analyzer dist/stats.json

Could't read webpack bundle stats from "/Users/wjy/WebstormProjects/demo/dist/stats.json":
Error: ENOENT: no such file or directory, open '/Users/wjy/WebstormProjects/demo/dist/stats.json'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] bundle-report: `webpack-bundle-analyzer dist/stats.json`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] bundle-report script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wjy/.npm/_logs/2018-12-07T01_38_34_625Z-debug.log

Process finished with exit code 1

报错原因：是因为ng build的时候，Angular默认输出目录为当前项目的dist/demo，而bundle-report在找stats.json的目录为当前项目的dist/目录下

解决方案：修改angular.json中的输出目录为：dist