利用可视化工具分析 bundle 组成、提供可行优化帮助

[wangjing]

1. 测量构建时间

优化 webpack 构建速度的第一步, 就是知道需要将精力集中在哪. webpack 官方提供 speed-measure-webpack-plugin 插件供我们测量出构建耗费的时间.

1.1 安装

npm install --save-dev speed-measure-webpack-plugin
// or
yarn add -D speed-measure-webpack-plugin

1.2 使用

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
//...
const webpackConfig = smp.wrap(prodWebpackConfig);

从上面图可以看出, 该插件能告诉我们：

• 整个打包耗时
• 每个 loader 的耗时

2. 分析模块依赖

通过 webpack-bundle-analyzer 可视化的去查看 webpack 输出文件的大小. 以及每个 bundle 包含的模块.

2.1 安装

npm install --save-dev webpack-bundle-analyzer
// or
yarn add -D webpack-bundle-analyzer

2.2 使用

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

它将为我们创建一个可视化且可交互的 treemap. 其包含所有打包输出的 bundle .

它可以为我们带来如下帮助:

• 了解每个 bundle 中组成
• 查看每个 bundle 的大小
• bundle 中是否存在相同的依赖包

3. 在线工具

• webpack analyse: 是一个在线 Web 应用，它为你提供了对包的更全面的分析，并且它绘制了项目中所有依赖模块的图形，这对于依赖关系较少的项目非常有用
• webpack-chart: 交互式饼图统计, 可以看 bundle 组成、每个模块大小
• webpack-visualizer: 可视化并分析您的 Webpack bundle，以查模块占用bundle 的比例
• webpack bundle optimize helper: 分析你的 bundle , 并提供给你关于如何改进以减少捆绑包大小的可行建议

上面的在线分析工具都依赖 stats.json 文件, 它表示webpack 构建过程中的信息. webpack 提供配置参数可以供我们在构建时生成该文件.

webpack --config webpack.prod.conf --profile --json > stats.json

• --profile : 记录下构建过程中的耗时信息
• --json: 信息已json文件格式输出
• > stats.json : 是 UNIX/Linux 系统中的管道命令、含义是把 webpack --profile --json 输出的内容通过管道输出到 stats.json 文件中

生成 stats.json 文件后上传到在线工具即可.

总结

• speed-measure-webpack-plugin 帮你分析构建时的耗时
• webpack-bundle-analyzer 通过 tree map 的方式, 提供查看每个bundle 的大小、组成， 通过 bundle 大小进行颜色区分、排序
• webpack analyse 是官方提供全方位分析工具, 从 module 、chunk、asset、error、waring 等维度去查看
• webpack-visualizer 可交互的饼图很方便分析每个 bundle 大小、组成及每个模块占用该 bundle 的比例
• webpack bundle optimize helper 提供优化帮助, 根据包的情况给出确实可行的建议.

这些工具回归到本质都是为了优化, 具体用那种取决于关注的点.