本文将介绍如何使用 webpack-bundle-analyzer 和 source-map-explorer 这两款工具来分析 Angular Bundle 的大小。下面我们将使用 Github 上的 angular6-example-app 这个项目来演示上述两个工具的使用案例，首先我们先来初始化 angular6-example-app 这个项目。
初始化 angular6-example-app
- 克隆 angular6-example-app
$ git clone https://github.com/Ismaestro/angular6-example-app.git- 安装 angular6-example-app 依赖
$ npm install- 启动开发服务器
$ npm start完成 angular6-example-app 项目初始化之后，我们先来介绍 webpack-bundle-analyzer 这个工具。
webpack-bundle-analyzer
Webpack Bundle Analyzer 这个工具为我们提供了交互性的 treemap 来可视化显示 webpack 打包输出文件的大小。
因为 angular6-example-app 项目已经默认安装了 webpack-bundle-analyzer 这个库，所以我们不需要再次安装该库，对于其它的项目来说的话，你可以在项目目录下执行下面的命令来执行安装操作：
代码语言：javascript复制$ npm i webpack-bundle-analyzer --save-dev接下来我们使用 Angular CLI 来构建项目，在构建的时候，需要添加相关参数，具体如下：
代码语言：javascript复制$ ng build --prod --stats-json当项目构建完成后，在根目录下的 dist 文件夹下会生成一个 stats.json 文件，然后我们可以通过以下的命令来查看 webpack 打包文件大小信息：
$ ./node_modules/.bin/webpack-bundle-analyzer dist/stats.json以上命令成功运行后，控制台会输出以下信息：
代码语言：javascript复制Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl C to close it当访问 http://127.0.0.1:8888 这个地址时，你会看到以下内容：
建议感兴趣的同学，都自己动手实践一下。在 angular6-example-app 项目中，也为我们提供了相应的 npm script，具体如下：
代码语言：javascript复制"bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"要运行该命令，只需在项目根目录下执行：
代码语言：javascript复制$ npm run bundle-reportsource-map-explorer
source-map-explorer 是一个工具，它使用 bundle 生成的 source map 文件来分析 bundle 的组成及各部分的大小。与 webpack bundle analyzer 类似，它也提供了可视化的方案来查看分析的结果。
首先我们先来在当前项目中安装 source-map-explorer：
代码语言：javascript复制$ npm i source-map-explorer --save-dev然后在重新进行项目构建：
代码语言：javascript复制$ ng build --prod --source-map构建完成后，在根目录下的 dist 文件夹下会生成 main bundle 文件，这时我们可以在命令行执行下列命令来查看结果：
代码语言：javascript复制$ node_modules/.bin/source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js成功执行上述命令后，在浏览器中你将会看到以下内容：
为了方便操作，我们也可以定义一个 npm script 任务来处理上述的工作：
代码语言：javascript复制"map-explorer": "ng build --prod --source-map && source-map-explorer
dist/main.d72e9d91fd17f9fe7b8c.js"其实除了本文介绍的两个插件之外，还有其它的第三方工具，也提供了分析 bundle 包大小的功能，比如 webpack-visualizer 和 Webpack Analyzer，有兴趣的同学也可以了解一下。
