如何进行打包分析？

约 865 字大约 3 分钟

2025-03-15

一、什么是打包分析

Webpack 打包分析有助于优化构建性能、减小输出文件、管理依赖、提升用户体验，并简化调试与维护工作。

二、打包分析的好处

优化构建性能：
- 识别瓶颈：通过分析，可以发现构建过程中的性能瓶颈，如耗时较长的模块或插件。
- 减少构建时间：优化这些瓶颈可以显著缩短构建时间，提升开发效率。
优化输出文件
- 减少文件体积：分析帮助识别未使用的代码或冗余依赖，从而减小输出文件大小。
- 代码分割：通过分析，可以合理拆分代码，优化加载性能。
依赖管理
- 发现重复依赖：分析可以找出重复或未使用的依赖，减少最终包的大小。
- 优化依赖加载：确保依赖按需加载，提升应用性能。
提升用户体验
- 加快加载速度：优化后的包体积更小，加载更快，提升用户体验。
- 减少资源浪费：去除无用代码和依赖，减少用户下载的资源量。
调试与维护
- 问题定位：分析帮助快速定位构建或运行时的问题。
- 维护便利：清晰的依赖关系图使代码更易维护和扩展。

三、如何实现

1. Webpack Bundle Analyzer

功能：生成交互式树状图，可视化展示打包文件的大小和依赖关系。

使用方式：

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

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

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

2. Webpack Stats Analyzer

功能：分析 Webpack 的 stats 文件，提供详细的模块和 chunk 信息。

使用方式：

npm install --save-dev webpack-stats-analyzer

const { analyze } = require("webpack-stats-analyzer");

const stats = require("./path/to/stats.json");
analyze(stats);

3. Source Map Explorer

功能：分析源码与生成代码的映射关系，帮助识别代码体积问题。

使用方式：

npm install --save-dev source-map-explorer

source-map-explorer bundle.js

4. Webpack Visualizer

功能：生成饼图，展示各模块在打包文件中的占比。

使用方式：

npm install --save-dev webpack-visualizer-plugin

const Visualizer = require("webpack-visualizer-plugin");

module.exports = {
  plugins: [
    new Visualizer({
      filename: "./statistics.html",
    }),
  ],
};

5. Webpack Dashboard

功能：提供实时构建信息，包括模块大小、构建时间等。

使用方式：

npm install --save-dev webpack-dashboard

const DashboardPlugin = require("webpack-dashboard/plugin");

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

6. Webpack Monitor

功能：监控构建过程，生成报告帮助优化打包。

使用方式：

npm install --save-dev webpack-monitor

const WebpackMonitor = require("webpack-monitor");

module.exports = {
  plugins: [
    new WebpackMonitor({
      capture: true,
      launch: true,
    }),
  ],
};

7. Webpack Bundle Size Analyzer

功能：分析打包文件大小，生成详细报告。

使用方式：

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

const BundleSizeAnalyzer = require("webpack-bundle-size-analyzer");

module.exports = {
  plugins: [new BundleSizeAnalyzer("./reports/bundle-size.txt")],
};

8、自定义实现

我们通过分析，可以在 emit（输出构建文件）阶段，获取到compilation构建对象里的文件信息，拿到文件和文件体积这两个信息，组装一下，可以新增并写入到构建文件中。

// plugins/analyze-webpack-plugin.js
class AnalyzeWebpackPlugin {
  apply(compiler) {
    // emit是异步串行钩子
    compiler.hooks.emit.tap("AnalyzeWebpackPlugin", (compilation) => {
      // Object.entries将对象变成二维数组。二维数组中第一项值是key，第二项值是value
      const assets = Object.entries(compilation.assets);

      let source = "# 分析打包资源大小 \n| 名称 | 大小 |\n| --- | --- |";

      assets.forEach(([filename, file]) => {
        source += `\n| ${filename} | ${file.size()} |`;
      });

      // 添加资源
      compilation.assets["analyze.md"] = {
        source() {
          return source;
        },
        size() {
          return source.length;
        },
      };
    });
  }
}

module.exports = AnalyzeWebpackPlugin;

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24