1. 初级分析 stats

https://www.webpackjs.com/api/stats/

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

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

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

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

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

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

具体请参考：

2. 体积分析 webpack-bundle-analyzer

https://www.npmjs.com/package/webpack-bundle-analyzer

它能方便的让你知道：

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

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

vue-cli中内置了 webpack-bundle-analyzer 插件，默认情况下，我们修改 package.json 中的打包命令为 npm run build —report 即可查看可视化打包分析。

3. 速度分析 speed-measure-webpack-plugin

https://github.com/stephencookdev/speed-measure-webpack-plugin

webpack 打包分析 - 图3
该插件了统计项目构建过程中在编译阶段的耗时情况

vue-cli配置：

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = {
  configureWebpack: smp.wrap({
    // ... webpack config goes here ...
  }
}

https://github.com/stephencookdev/speed-measure-webpack-plugin/issues/61