Webpack Bundle分析时，为什么第三方库占比过大却看不到具体文件？

爱欢酱~ 提问于 2026-02-08 09:13:29 阅读 26

工具

在用webpack-bundle-analyze分析打包结果时，第三方库显示占比60%但点击后全是vendor_chunk_0.js这样的抽象文件名，根本看不出是哪个库占的空间？

我试过用webpack-visualizer和bundle-stats都一样，还特意在webpack配置里加了

optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
        chunks: 'all',
      }
    }
  }
}

但生成的报告里还是只有大块的vendor包，连react和axios这种明显的大头都分不开，是不是配置哪里漏了？

Loader 打包优化构建工具

我来解答赞 5 收藏

反馈

2 条解答

俊衡 Lv1

你这个配置问题出在 splitChunks 的 name 设置上。你用了固定的 'vendors'，所有 node_modules 里的库全被打进一个叫 vendors.js 的包里了，分析工具当然没法区分哪个库占多少。

要拆开就得让 chunk 按模块名生成独立文件。把 cacheGroups 改成这样：

optimization: {

  splitChunks: {

    cacheGroups: {

      vendor: {

        test: /[\/]node_modules[\/]/,

        name(module) {

          const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];

          return pkg.${packageName.replace('@', '')};

        },

        chunks: 'all',

        priority: 10

      }

    }

  }

}

name 用函数动态生成，比如 react 就是 pkg.react.js，axios 就是 pkg.axios.js。这样 bundle 分析工具就能看到每个第三方库的独立体积了。

另外确保你在 bundle-analyzer 初始化时传了正确的 stats.json，而且打包时生成了 source map，不然也会影响解析精度。API调用相关的库比如 axios、fetch 类的，拆出来后一眼就能看清楚是不是被重复引入了。

2026-02-12 16:03

Mc.兴慧 Lv1

你这个配置分出来的 vendors chunk 是对的，但 webpack-bundle-analyzer 默认是按 chunk 分析的，当然看不到具体模块

要看到第三方库具体占比，需要改成按 module 层级分析，把 analyzer 的 mode 换成 'module' 就行

new BundleAnalyzerPlugin({
analyzerMode: 'module'
})

顺便说一句，分析 bundle 真心累，我昨晚也卡这问题了，试了几个配置才整明白

2026-02-08 09:15