我们在开发的时候为了方便会引用很多第三方库来便捷的开发我们的应用，但是打包部署的时候发现dist文件特别大，那我们怎么知道是哪个库或哪个模块占用了多少的资源？我们可以用webpack-bundle-analyzer来辅助分析包的大小组成。
前置准备
我的angular项目基于的angular版本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| $ ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.2.2
Node: 12.16.2
Package Manager: npm 7.24.0
OS: darwin x64
Angular: 12.2.4
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1202.4
@angular-devkit/build-angular 12.2.4
@angular-devkit/core 12.2.2
@angular-devkit/schematics 12.2.2
@angular/cli 12.2.2
@schematics/angular 12.2.2
rxjs 6.6.7
typescript 4.3.5
|
Webpack-bundle-analyzer npm主页
在项目中安装webpack-bundle-analyzer：
1
2
3
4
| # NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
|
使用webpack-bundle-analyzer
angular提供了angular cli来做webpack的工作，查看cli里面的build命令，我们可以知道传递--stats-json就会生成一个stats.json文件，可以使用webpack-bundle-analyzer之类的工具进行分析。所以我们在打包的时候加上--stats-json：
1
| $ ng build --configuration production --stats-json
|
运行完之后可以在dist目录里面找到stats.json的一个文件，然后我们可以运行webpack-bundle-analyzer来进行分析：
1
| $ ./node_modules/.bin/webpack-bundle-analyzer dist/youProject/stats.json
|
我们可以打开http://127.0.0.1:8888来可视化的分析项目的各种包的大小：
写入package.json
我们前面看到分析包的这个过程运行了两个命令，而且都很长，我们来将它整合起来放入package.json中：
1
2
3
4
5
| {
"scripts": {
"analyzer": "ng build --configuration production --stats-json && webpack-bundle-analyzer dist/youProject/stats.json"
}
}
|
这样我们想分析包的大小的时候，就可以直接运行：
1
2
3
4
| # Yarn
$ yarn analyzer
# Npm
$ npm run analyzer
|
非常方便。
创建一个“分析”的环境
我们在打包production环境的时候基本上souce-map都是关闭的，这样可能不利于我们的分析。那我们就单独创建一个“分析”的环境。
在angular.json中，找到build，然后添加一个analyzer环境：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| {
"projects": {
"youPorject": {
"architect": {
"build": {
"configurations": {
"analyzer": {
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"namedChunks": true,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
}
}
}
}
}
|
我们在这个环境中打开sourceMap、namedChunks可以让我们更方便的分析。
这样我们可以了解打包后的文件里有什么，并且可以采取相应措施去优化压缩包的大小。
