Webpack打包后怎么分析bundle体积过大问题？

Des.锡丹提问于 2026-03-01 14:14:20 阅读 28

前端

最近项目打包出来的 bundle.js 快 2MB 了，明显感觉首屏加载变慢，但不知道具体是哪些模块占的空间大。

我试过用 webpack-bundle-analyzer，但在 webpack.config.js 里加了插件后运行 build 命令没反应，也没看到分析页面弹出来。配置是不是哪里写错了？

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'server',
      openAnalyzer: true
    })
  ]
};

Plugin

我来解答赞 3 收藏

反馈

1 条解答

设计师卫利 Lv1

bundle.js 快 2MB 确实有点夸张了，首屏不慢才怪。你配置的 webpack-bundle-analyzer 语法没问题，但没弹出来大概率是因为构建没走完，或者你是在开发模式下跑的。这个插件是在构建流程结束后才启动服务的。

更好的写法是不要直接把它写死在 plugins 里，每次打包都弹个窗口出来很烦，而且会影响构建速度。建议通过环境变量来控制，只在需要分析的时候才开启。这样既优雅又不会干扰正常构建流程。

改一下你的 webpack.config.js：

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

const isAnalysis = process.env.npm_config_report; // 读取 npm 命令参数



module.exports = {

  plugins: [

    // 只有带 --report 参数时才开启分析

    isAnalysis && new BundleAnalyzerPlugin({

      analyzerMode: 'server',

      openAnalyzer: true

    })

  ].filter(Boolean) // 过滤掉 false 值，保持数组纯净

};

然后在 package.json 的 scripts 里加个专门的分析命令：

"scripts": {

  "analyze": "npm run build --report"

}

这时候你运行 npm run analyze，构建完成后浏览器就会自动打开那个可视化的树状图了。

如果还是没反应，检查一下终端有没有报错，有时候默认端口 8888 被占用了也会没动静。实在不行，把 analyzerMode 改成 'static'，它会生成一个 HTML 文件在 output 目录里，自己手动打开看也一样。看到那个巨大的矩形块，你就知道是哪个倒霉的依赖把体积撑大了，通常是 ECharts 或者 moment 这种大家伙。

2026-03-01 14:17