qrcode

马上订阅,开启修仙之旅

Angular 工具篇之分析包的大小

本文将介绍如何使用 webpack-bundle-analyzersource-map-explorer 这两款工具来分析 Angular Bundle 的大小。下面我们将使用 Github 上的 angular6-example-app 这个项目来演示上述两个工具的使用案例,首先我们先来初始化 angular6-example-app 这个项目。

初始化 angular6-example-app

  1. 克隆 angular6-example-app
1
$ git clone https://github.com/Ismaestro/angular6-example-app.git
  1. 安装 angular6-example-app 依赖
1
$ npm install
  1. 启动开发服务器
1
$ npm start

完成 angular6-example-app 项目初始化之后,我们先来介绍 webpack-bundle-analyzer 这个工具。

webpack-bundle-analyzer

Webpack Bundle Analyzer 这个工具为我们提供了交互性的 treemap 来可视化显示 webpack 打包输出文件的大小。

因为 angular6-example-app 项目已经默认安装了 webpack-bundle-analyzer 这个库,所以我们不需要再次安装该库,对于其它的项目来说的话,你可以在项目目录下执行下面的命令来执行安装操作:

1
$ npm i webpack-bundle-analyzer --save-dev

接下来我们使用 Angular CLI 来构建项目,在构建的时候,需要添加相关参数,具体如下:

1
$ ng build --prod --stats-json

当项目构建完成后,在根目录下的 dist 文件夹下会生成一个 stats.json 文件,然后我们可以通过以下的命令来查看 webpack 打包文件大小信息:

1
$ ./node_modules/.bin/webpack-bundle-analyzer dist/stats.json

以上命令成功运行后,控制台会输出以下信息:

1
2
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

当访问 http://127.0.0.1:8888 这个地址时,你会看到以下内容:

webpack-bundle-analyzer

建议感兴趣的同学,都自己动手实践一下。在 angular6-example-app 项目中,也为我们提供了相应的 npm script,具体如下:

1
"bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

要运行该命令,只需在项目根目录下执行:

1
$ npm run bundle-report

source-map-explorer

source-map-explorer 是一个工具,它使用 bundle 生成的 source map 文件来分析 bundle 的组成及各部分的大小。与 webpack bundle analyzer 类似,它也提供了可视化的方案来查看分析的结果。

首先我们先来在当前项目中安装 source-map-explorer:

1
$ npm i source-map-explorer --save-dev

然后在重新进行项目构建:

1
$ ng build --prod --source-map

构建完成后,在根目录下的 dist 文件夹下会生成 main bundle 文件,这时我们可以在命令行执行下列命令来查看结果:

1
$ node_modules/.bin/source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js

成功执行上述命令后,在浏览器中你将会看到以下内容:

source-map-explorer

为了方便操作,我们也可以定义一个 npm script 任务来处理上述的工作:

1
2
"map-explorer": "ng build --prod --source-map && source-map-explorer 
dist/main.d72e9d91fd17f9fe7b8c.js"

其实除了本文介绍的两个插件之外,还有其它的第三方工具,也提供了分析 bundle 包大小的功能,比如 webpack-visualizerWebpack Analyzer,有兴趣的同学也可以了解一下。


欢迎小伙伴们订阅前端修仙之路,及时阅读 Angular、RxJS、TypeScript 和 Node.js 最新文章。

qrcode