[转]使用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为：

1.  
   {
2.  
   "name": "demo",
3.  
   "version": "0.0.0",
4.  
   "scripts": {
5.  
   "ng": "ng",
6.  
   "start": "ng serve --port 4500",
7.  
   "build": "ng build",
8.  
   "test": "ng test",
9.  
   "lint": "ng lint",
10.  
    "e2e": "ng e2e",
11.  
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
12.  
    },
13.  
    "private": true,
14.  
    "dependencies": {
15.  
    "@angular/animations": "^6.1.0",
16.  
    "@angular/common": "^6.1.0",
17.  
    "@angular/compiler": "^6.1.0",
18.  
    "@angular/core": "^6.1.0",
19.  
    "@angular/forms": "^6.1.0",
20.  
    "@angular/http": "^6.1.0",
21.  
    "@angular/platform-browser": "^6.1.0",
22.  
    "@angular/platform-browser-dynamic": "^6.1.0",
23.  
    "@angular/router": "^6.1.0",
24.  
    "core-js": "^2.5.4",
25.  
    "reflect-metadata": "^0.1.12",
26.  
    "rxjs": "^6.0.0",
27.  
    "viser-ng": "^2.4.2",
28.  
    "zone.js": "~0.8.26"
29.  
    },
30.  
    "devDependencies": {
31.  
    "@angular-devkit/build-angular": "~0.7.0",
32.  
    "@angular/cli": "~6.1.5",
33.  
    "@angular/compiler-cli": "^6.1.0",
34.  
    "@angular/language-service": "^6.1.0",
35.  
    "@types/jasmine": "~2.8.6",
36.  
    "@types/jasminewd2": "~2.0.3",
37.  
    "@types/node": "~8.9.4",
38.  
    "codelyzer": "~4.2.1",
39.  
    "jasmine-core": "~2.99.1",
40.  
    "jasmine-spec-reporter": "~4.2.1",
41.  
    "karma": "~1.7.1",
42.  
    "karma-chrome-launcher": "~2.2.0",
43.  
    "karma-coverage-istanbul-reporter": "~2.0.0",
44.  
    "karma-jasmine": "~1.1.1",
45.  
    "karma-jasmine-html-reporter": "^0.2.2",
46.  
    "protractor": "~5.4.0",
47.  
    "ts-node": "~5.0.1",
48.  
    "tslint": "~5.9.1",
49.  
    "typescript": "~2.7.2",
50.  
    "webpack-bundle-analyzer": "^3.0.3"
51.  
    }
52.  
    }

3.执行构建打包

ng build --prod --stats-json

1.  
   wujiayus-MacBook-Pro:demo wjy$ ng build --prod --stats-json
2.  
   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
3.  
   Hash: ccc739b1c0514372c3fb
4.  
   Time: 15256ms
5.  
   chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
6.  
   chunk {1} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]
7.  
   chunk {2} polyfills.7fb637d055581aa28d51.js (polyfills) 59.6 kB [initial] [rendered]
8.  
   chunk {3} main.65868760e886e7e83ebe.js (main) 868 kB [initial] [rendered]

4.执行npm命令：bundle-report

5.解决报错问题：

在执行命令：bundle-report报错

1.  
   /usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run bundle-report --scripts-prepend-node-path=auto
2.  
    
3.  
   > demo@0.0.0 bundle-report /Users/wjy/WebstormProjects/demo
4.  
   > webpack-bundle-analyzer dist/stats.json
5.  
    
6.  
   Could't read webpack bundle stats from "/Users/wjy/WebstormProjects/demo/dist/stats.json":
7.  
   Error: ENOENT: no such file or directory, open '/Users/wjy/WebstormProjects/demo/dist/stats.json'
8.  
   npm ERR! code ELIFECYCLE
9.  
   npm ERR! errno 1
10.  
    npm ERR! demo@0.0.0 bundle-report: `webpack-bundle-analyzer dist/stats.json`
11.  
    npm ERR! Exit status 1
12.  
    npm ERR!
13.  
    npm ERR! Failed at the demo@0.0.0 bundle-report script.
14.  
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
15.  
     
16.  
    npm ERR! A complete log of this run can be found in:
17.  
    npm ERR! /Users/wjy/.npm/_logs/2018-12-07T01_38_34_625Z-debug.log
18.  
     
19.  
    Process finished with exit code 1
20.  
     

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

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

然后重新执行下：

ng build --prod --stats-json

然后会在当前项目的目录下生成一个dist目录文件；

然后再执行npm命令：bundle-report，

这时候，浏览器会自动打开一个页面，如下：

然后就可以看到每个的插件，模块的大小和经nginx压缩以后的大小了。

 

 

转自：https://blog.csdn.net/wjyyhhxit/article/details/84869472