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

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

优化

我在用 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分离

我来解答赞 8 收藏

反馈

2 条解答

树人 Dev Lv1

看起来你的 splitChunks 配置确实有问题。按照 webpack 文档的建议，priority 和 chunks 的设置需要特别小心。

首先检查你的 splitChunks.cacheGroups 配置，推荐这样设置：

optimization: {

  splitChunks: {

    cacheGroups: {

      vendors: {

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

        priority: -10

      },

      common: {

        minChunks: 2,

        priority: -20,

        reuseExistingChunk: true

      }

    }

  }

}

这段代码确保了优先级设置合理，common 组设置了 reuseExistingChunk 来避免重复打包。

样式部分不会直接影响到 JavaScript 的 chunk 打包，不过最好也遵循规范把 CSS 单独抽离出来处理。

最后提醒一下，webpack 的配置确实挺容易让人头大的，调试时可以打开详细日志看看每个模块的分配情况，这对定位问题很有帮助。我上次也被这个问题折腾得够呛，花了好几天才搞定。

2026-03-28 05:00

诸葛振莉 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