如何用 Bundle Analyzer 看出哪个组件导致打包体积过大？

名赫的笔记提问于 2026-03-09 03:33:21 阅读 30

优化

我用 webpack 打了个包，发现 vendor.js 超过 2MB，想用 webpack-bundle-analyzer 分析具体是哪个组件或库拖慢了体积，但分析图里模块太多，根本看不出重点。有没有什么配置技巧能让我快速定位到“罪魁祸首”？

比如我现在引入了一个图表库，但不确定是不是它的问题。这是我的入口 HTML：

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <script src="./dist/vendor.js"></script>
  <script src="./dist/app.js"></script>
</body>
</html>

我来解答赞 10 收藏

反馈

2 条解答

极客雨涵 Lv1

问题在于默认视图太杂，直接看静态报告更清晰。

在 webpack 配置里加上这段：

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



module.exports = {

  plugins: [

    new BundleAnalyzerPlugin({

      analyzerMode: 'static',  // 生成 HTML 报告

      reportFilename: 'bundle-report.html',

      openAnalyzer: false,     // 不自动打开浏览器

      generateStatsFile: true, // 同时生成 stats.json

      statsFilename: 'stats.json',

    }),

  ],

};

执行 webpack --profile --json > stats.json 后，用 npx webpack-bundle-analyzer stats.json 打开报告，或者直接浏览器打开生成的 bundle-report.html。

重点来了：打开报告后，点右上角「Treemap」视图，然后看左上角的大方块，那些就是体积最大的模块，一眼就能看到是不是你那个图表库在作妖。

如果确认是图表库的问题，检查下是不是全量引入了，改成按需引入：

// 错误写法

import * as echarts from 'echarts';



// 正确写法（按需引入）

import ECharts from 'echarts/lib/echarts';

import 'echarts/lib/chart/bar';

import 'echarts/lib/chart/line';

import 'echarts/lib/component/tooltip';

2026-03-13 23:02

打工人艳艳 Lv1

用 webpack-bundle-analyzer 找大体积组件确实容易眼花，我通常这么干：

先确保 analyzer 配置正确，在 webpack.config.js 里这么配：

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



module.exports = {

  plugins: [

    new BundleAnalyzerPlugin({

      analyzerMode: 'static',

      reportFilename: 'report.html',

      openAnalyzer: false,

      generateStatsFile: true,

      statsFilename: 'stats.json',

    })

  ]

}

几个实用技巧：
1. 按 size 排序：生成的报告左上角可以选 "Stat" 或 "Parsed" 视图，选 "Parsed" 更准，然后点表头的 "Size" 列排序，最大的模块会排最前面

2. 按路径过滤：如果你怀疑是某个图表库，直接在报告页顶部的搜索框输库名（比如 echarts 或 chart.js），会高亮显示相关模块

3. 看树状图：左侧切换到 "Treemap" 视图，面积越大的方块体积越大，一般一眼就能看到哪些库占地方

4. 如果还是找不到，可以临时注释掉图表库的引入代码，重新打包对比体积变化

按照 webpack 官方文档建议，对于第三方库最好检查：
- 是否用了完整版而不是按需导入
- 是否有重复依赖（用 webpack-bundle-analyzer 的 "Concatenated" 视图能看到）
- 是否用了非 minified 版本

我上次就被一个 moment.js 的 locale 文件坑过，占了快 500KB...现在看到大体积报告都 PTSD 了

2026-03-09 04:00