Angular 工具篇之分析包的大小

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

初始化 angular6-example-app

1. 克隆 angular6-example-app

$ git clone https://github.com/Ismaestro/angular6-example-app.git

1. 安装 angular6-example-app 依赖

$ npm install

1. 启动开发服务器

$ npm start

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

webpack-bundle-analyzer

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

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

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

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

$ ng build --prod --stats-json

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

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

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

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，具体如下：

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

要运行该命令，只需在项目根目录下执行：

$ npm run bundle-report

source-map-explorer

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

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

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

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

$ ng build --prod --source-map

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

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

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

source-map-explorer

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

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

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