Webpack 打包可视化分析工具

2024-11-25
webpack
75

简介

Webpack 是一个流行的前端模块打包工具,它可以帮助开发者将多个模块及其依赖项打包成一个或多个 bundle。然而,在大型项目中,随着代码量的增加,webpack 打包过程可能会变得复杂且难以理解。为了解决这一问题,一些可视化分析工具应运而生,这些工具能够帮助开发者更直观地查看和优化 webpack 的打包结果。

本文档旨在介绍几种常用的 Webpack 打包可视化分析工具,并指导如何使用它们来提高开发效率和应用性能。

webpack-bundle-analyzer

webpack-bundle-analyzer 是一款非常受欢迎的工具,它可以生成一个交互式的 HTML 报告,展示所有资产(assets)大小以及它们之间的关系。这对于识别哪些文件占用空间过大特别有用。

安装

npm install --save-dev webpack-bundle-analyzer

配置

在你的 webpack 配置文件中添加如下插件:

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

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

使用

运行你的构建命令后,浏览器会自动打开一个新的标签页显示分析报告。如果没有自动打开,你也可以手动访问指定端口上的服务。

image.png

鼠标移动到分析报告的某个单元上,立马会弹窗对应模块的代码体积,帮助研发定位过大的包

Webpack Analysis

Webpack Analysis 是 webpack 官方提供的可视化分析工具,相比于其它工具,它提供的视图更全,功能更强大,能够通过创建依赖关系图对你的包进行更彻底的检查。

使用 Webpack Analysis 需要上传一个 stats 的json文件,stats 的介绍可以查看 https://webfem.com/post/webpack-stats

// 以下两个命令可以生成 stats.json 文件
webpack --json=stats.json
webpack --profile --json > stats.json

stats.json 文件导入页面,就可以看到一些关键统计信息:

image.png

点击页面中的 modules/chunks/assets 按钮,页面会渲染出对应实体的依赖关系图,例如:

image.png

Webpack Analysis 提供了非常齐全的分析视角,信息几乎没有失真,但上手难度稍高,信息噪音比较多。为此,社区还推出了一个简化版的工具——webpack-deps-tree。该工具功能相似,但使用更为简单,信息也更加简洁。用户可以根据实际需求选择交叉使用这两者。

Statoscope

Statoscope 也是一个非常强大的可视化分析工具,主要提供如下功能:

  • 完整的依赖关系视图,涵盖 modules/chunks/assets/entrypoints/packages 维度;

  • entrypoints/chunks/packages/module 体积分析;

  • 重复包检测;

  • 多份 stats 数据对比

使用方法

一是将 stats 数据导入到 Statoscope 在线页面

二是使用 @statoscope/webpack-plugin 插件,用法:

  1. 安装依赖:
npm i -D @statoscope/webpack-plugin
  1. 注册插件:
const StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin').default;

module.exports = {
  ...
  plugins: [new StatoscopeWebpackPlugin()],
};

之后,运行 npx webpack 命令,编译结束后默认打开分析视图:

image.png

Statoscope 提供了多维度的统计信息,包括:入口文件、Chunk 数量、模块总数、重复模块树、编译耗时以及 Initial Chunk 体积等。更重要的是,Statoscope 还展示了模块之间,以及模块与 Chunk 和 Entry 之间的依赖关系。

image.png

我们可以据此推断出模块体积、为何需要打包该模块、有哪些模块被重复引用等信息。

相比于 wbpack analysis 聚合图的关系,这种数据下钻的形式更清晰,更容易查询。

webpack-visualizer

另一个轻量级选项是 webpack-visualizer,它提供了一个简洁美观的方式来展示打包后的模块树结构。

webpack-visualizer 有两种使用方案

  1. 将 stats.json 文件上传到官方页面 https://chrisbateman.github.io/webpack-visualizer/

  2. 使用 webpack-visualizer 插件

使用方法:

安装

npm install webpack-visualizer-plugin -D

配置

const VisualizerPlugin = require('webpack-visualizer-plugin'); 

module.exports = {
// ... 
  plugins: [
    new Visualizer({ filename: './stats.html' })
  ],
} 
//...

运行 npx webpack 之后,将会出现模块占比图

image

webpack-visualizer 目前已经年久失修,不支持 webpack5。webpack5 使用 webpack-visualizer 会抛出 compiler.plugin is not a function错误。

如果想使用,可以使用 webpack-visualizer-plugin2

当让,与其功能类似的还有 webpack-chart,因为功能和使用场景都一致,这里就不展开介绍了,可以看下它的可视化界面

image.png

speed-measure-webpack-plugin

如果你想要知道每个 loader 和 plugin 对构建时间的影响,那么 speed-measure-webpack-plugin 将是一个不错的选择。它可以让你看到哪个部分消耗了最多的构建时间。

安装

npm install -D speed-measure-webpack-plugin

配置

首先需要引入并实例化该插件,然后通过这个实例来包装原始的 webpack 配置对象。

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // 你的 webpack 配置
});

使用

像平常一样执行 webpack 构建命令,控制台输出将包含额外的时间统计信息。

image.png

结论

利用上述工具,你可以轻松地对 Webpack 打包过程进行深入分析,从而找出潜在的问题点并采取相应措施加以改进。无论是减少加载时间还是缩小最终产品的体积,合理运用这些分析工具都将极大地促进项目的健康发展。