webpack构建情况分析

本文介绍了如何分析 webpack 的构建情况，为后续的优化提供了基础。

使用 webpack 内置的 stats

启动 webpack 时使用以下带参的命令，生成一个json文件：
webpack --profile --json > stats.json

--profile：记录构建过程中的耗时信息
--json：以JSON的格式输出构建结果

该文件的结构可参考官网文档

得到stats.json后，可使用官方工具 Webpack Analyse 对这个文件进行分析。
在该工具中，能够得到类似的依赖图：

由于stats.json的粒度较粗，比较难看出构建的问题所在。为此，我们可以使用以下两个方法，来具体分析构建的速度与体积。

构建速度分析

在 webpack 中，可以使用插件speed-measure-webpack-plugin进行构建速度分析。

安装：

npm i speed-measure-webpack-plugin -D

使用：

// webpack.config.js
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin')

const smp = new SpeedMeasureWebpackPlugin()
module.exports = smp.wrap({
  // 原来的配置
})

在导出的配置外面包裹上smp.wrap之后，再次运行构建，就能看到以下输出：

SpeedMeasureWebpackPlugin会将各个模块及插件的耗时情况用不同颜色标出，比如，绿色表示构建快，黄色表示构建速度一般，红色表示构建慢。

得到了各模块的耗时情况，就可以根据具体的情况进行优化。
比如图中的ExtractTextPlugin耗时将近两分钟，我们就可以看下其中实现的代码，找出其中耗时的部分，fork 一份代码下来，根据自己的实际使用情况进行优化。
再比如图中的sass-loader耗时24秒，我们就能试试如果用 less 是否能够更快一些。

构建体积分析

在 webpack 中，可以使用插件webpack-bundle-analyzer进行构建速度分析。

安装：

npm i webpack-bundle-analyzer -D

使用：

// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = {
  // ... 其他配置
  plugins: [
    new BundleAnalyzerPlugin(),
    // ... 
  ]
}

构建之后，会自动打开http://127.0.0.1:8888/，显示各个模块的体积大小：

从图上可以看出，react占据了绝大部分的体积。所以我们在优化的时候，可以考虑将react等库抽离出来，使用CDN等方式导入，以减小体积占用。