Webpack打包后怎么分析bundle里到底包含了哪些模块？

西门向景提问于 2026-03-12 17:00:21 阅读 3

前端

我用Webpack打包完项目，发现vendor.js特别大，想看看里面到底塞了哪些依赖，但不知道怎么生成分析报告。试过加--analyze参数，但好像没生效？

网上说要用webpack-bundle-analyzer插件，但我照着配了也没弹出可视化页面，是不是配置写错了？我的配置大概是这样的：

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

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

我来解答赞 5 收藏

反馈

1 条解答

东方自雨 Lv1

你的配置其实没大问题，问题大概率出在这几个地方：

1. 插件没装或者装错了
2. 引入方式可能有问题

先确认插件装了没：

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

然后检查下你的配置，完整写法是这样的：

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



module.exports = {

  // ...其他配置  plugins: [

    new BundleAnalyzerPlugin({

      analyzerMode: 'static',  // 生成HTML文件

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

      reportFilename: 'bundle-report.html'  // 报告文件名

    })

  ]

};

你用 server 模式的话，它会启动一个本地服务器然后尝试自动打开浏览器。可能你本地有端口冲突或者浏览器没弹出来你自己没注意到。

建议改成 static 模式，会在 dist 目录生成一个 HTML 报告文件，直接拖到浏览器就能看，大小占比一目了然。

另外提醒下，--analyze 那个参数不是 webpack 自带的，得先装完插件之后在 package.json 的 scripts 里这样写：

{

  "scripts": {

    "analyze": "webpack --analyze"

  }

}

然后执行 npm run analyze 才会生效。

如果还是不行，你可以在配置里加个 logLevel: 'debug' 看看插件有没有正常加载。

2026-03-12 17:01