代码分割时 CommonChunk 被重复打包怎么办？

钰莹的笔记提问于 2026-03-09 12:54:19 阅读 15

优化

我在用 webpack 做代码分割，把公共依赖抽成 common.js，但发现 vendor 和 common 里都包含了 lodash，页面加载时重复执行了，体积也变大了。是不是 splitChunks 配置写错了？

我试过调整 cacheGroups 的 priority 和 chunks，但没效果。下面是我在组件里引用的样式，会不会也有影响？

.button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}
.button:hover {
  background: #0056b3;
}

Common分离

我来解答赞 3 收藏

反馈

1 条解答

诸葛振莉 Lv1

这个重复打包问题我遇到过好几次，确实是splitChunks配置的问题。样式代码不会影响这个情况，我们主要看打包配置。

常见的原因是cacheGroups的默认配置没调好。我给你一个经过验证的配置方案，你先试试：

optimization: {

  splitChunks: {

    cacheGroups: {

      // 这里需要注意，把第三方库单独提取

      vendors: {

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

        name: 'vendors',

        chunks: 'all',

        priority: 20  // 优先级要高于common

      },

      // 公共模块

      common: {

        name: 'common',

        minChunks: 2,  // 至少被引用两次才提取

        chunks: 'initial',

        priority: 10,

        reuseExistingChunk: true

      }

    }

  }

}

原理是这样的：
1. priority决定了哪个规则优先匹配，vendor的20高于common的10，所以node_modules里的库会优先进vendor
2. minChunks设为2确保只有真正共享的代码才会被打包到common
3. reuseExistingChunk避免重复打包已经存在的chunk

如果还有问题，可以试试这几个排查步骤：
第一，检查你的import语句是不是有重复引入lodash的情况
第二，运行webpack-bundle-analyzer看看具体哪些模块被打包到哪里了
第三，确保没有在多个entry里都引入了lodash

顺便说一句，这种配置问题真的挺烦人的，我当初也调试了好久才搞明白。webpack的文档写得太简略了，很多细节都得靠试错。

如果还是不行，你可以把完整的webpack配置贴出来，我帮你看下是不是其他配置影响了splitChunks的行为。

2026-03-09 13:02