元素
元素
工具
博客
问答

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

Des.锡丹 阅读 42
前端

最近项目打包出来的 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
我来解答 赞 8 收藏
二维码
手机扫码查看
反馈
2 条解答
码农志鲜
码农志鲜 Lv1
先检查下是否安装了 webpack-bundle-analyzer，有时候装个包都容易出错。直接用这个命令检查下：
npm list webpack-bundle-analyzer

如果没装，先装上：
npm install --save-dev webpack-bundle-analyzer

然后确保 webpack 配置里没有语法错误，直接用这个配置试试：
pre class="pure-highlightjs line-numbers">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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


跑 build 后应该会自动打开浏览器显示分析页面。如果还不行，尝试手动指定端口：
new BundleAnalyzerPlugin({

  analyzerMode: 'server',

  openAnalyzer: true,

  analyzerPort: 8888

})


端口可以自己改，有时候默认端口被占用了。如果还不行，可能是构建脚本没对 plugin 生效，检查下 package.json 里的 scripts 配置，确保 build 脚本里有 webpack。
点赞
2026-03-22 15:09
设计师卫利
设计师卫利 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 这种大家伙。
点赞 1
2026-03-01 14:17
相关推荐
元素
元素
工具
博客
问答
登录/注册