4.14 输出分析

问题一：如何使用可视化的分析工具？

在启动 Webpack 时，支持两个参数，分别是：

• --profile：记录下构建过程中的耗时信息；
• --json：以 JSON 的格式输出构建结果，最后只输出一个.json文件，这个文件中包括所有构建相关的信息。

在启动 Webpack 时带上以上两个参数，启动命令如下webpack --profile --json > stats.json，你会发现项目中多出了一个stats.json文件。 这个stats.json文件是给后面介绍的可视化分析工具使用的。

webpack --profile --json会输出字符串形式的 JSON，> stats.json是 UNIX/Linux 系统中的管道命令、含义是把webpack --profile --json输出的内容通过管道输出到stats.json文件中。

问题二：官方的可视化分析工具？

Webpack Analyse

Webpack 官方提供了一个可视化分析工具Webpack Analyse，它是一个在线 Web 应用。

打开 Webpack Analyse 链接的网页后，你就会看到一个弹窗提示你上传 JSON 文件，也就是需要上传上面讲到的stats.json文件，如图：

[图片上传中...(image-fdcbd6-1573481357715)]

Webpack Analyse 不会把你选择的stats.json文件发达到服务器，而是在浏览器本地解析，你不用担心自己的代码为此而泄露。 选择文件后，你马上就能如下的效果图：

image

它分为了六大板块，分别是：

• Modules：展示所有的模块，每个模块对应一个文件。并且还包含所有模块之间的依赖关系图、模块路径、模块ID、模块所属 Chunk、模块大小；
• Chunks：展示所有的代码块，一个代码块中包含多个模块。并且还包含代码块的ID、名称、大小、每个代码块包含的模块数量，以及代码块之间的依赖关系图；
• Assets：展示所有输出的文件资源，包括.js、.css、图片等。并且还包括文件名称、大小、该文件来自哪个代码块；
• Warnings：展示构建过程中出现的所有警告信息；
• Errors：展示构建过程中出现的所有错误信息；
• Hints：展示处理每个模块的过程中的耗时。

webpack-bundle-analyzer

webpack-bundle-analyzer是另一个可视化分析工具， 它虽然没有官方那样有那么多功能，但比官方的要更加直观。

先来看下它的效果图：

image

它能方便的让你知道：

• 打包出的文件中都包含了什么；
• 每个文件的尺寸在总体中的占比，一眼看出哪些文件尺寸大；
• 模块之间的包含关系；
• 每个文件的 Gzip 后的大小。

接入 webpack-bundle-analyzer 的方法很简单，步骤如下：

1. 安装 webpack-bundle-analyzer 到全局，执行命令npm i -g webpack-bundle-analyzer；
2. 按照上面提到的方法生成stats.json文件；
3. 在项目根目录中执行webpack-bundle-analyzer后，浏览器会打开对应网页看到以上效果。