Webpack 3.8.1升级至4.4.1：splitChunks性能问题及插件适配难题

我太懂这种维护旧项目升级的煎熬了！Webpack 4 直接砍掉了咱们用熟的 CommonsChunkPlugin，换成了更智能但需要重新适配的 SplitChunksPlugin，我帮你把原来的配置精准转换成 Webpack 4 的写法，一步到位解决痛点：

核心替换思路 #

原来的两个 CommonsChunkPlugin 分别负责提取公共业务代码（common）和第三方依赖（vendors），在 Webpack 4 中，这部分逻辑全部迁移到 optimization.splitChunks 的 cacheGroups 里配置。

对应配置代码 #

直接把下面的配置加到你的 webpack.config.js 的 optimization 字段中（如果原来没有 optimization 就新建一个）：

optimization: {
  // 关键：设置为'all'才能处理entry chunks，默认只处理异步chunk
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      // 对应第一个 CommonsChunkPlugin：提取被至少3个非指定entry引用的公共代码
      common: {
        name: 'common',
        chunks: (chunk) => {
          // 排除你原来指定的entry：'ace-iframe'、'custom-theme-ace'
          return !['ace-iframe', 'custom-theme-ace'].includes(chunk.name);
        },
        minChunks: 3, // 和原配置的minChunks一致
        priority: 10, // 优先级低于vendors，确保第三方依赖优先进入vendors
        reuseExistingChunk: true, // 复用已存在的chunk，避免重复打包
      },
      // 对应第二个 CommonsChunkPlugin：提取被至少2个非指定entry引用的第三方依赖
      vendors: {
        name: 'vendors',
        test: (module) => {
          // 直接复用你原来的isVendorModule判断逻辑就行
          return isVendorModule(module);
        },
        chunks: (chunk) => {
          // 同样排除指定entry
          return !['ace-iframe', 'custom-theme-ace'].includes(chunk.name);
        },
        minChunks: 2, // 和原配置的count >=2一致
        priority: 20, // 优先级高于common，优先拆分第三方依赖
        reuseExistingChunk: true,
      }
    }
  },
  // 可选但建议：提取runtime代码，避免每次打包hash变化（原CommonsChunkPlugin隐式处理的逻辑）
  runtimeChunk: {
    name: 'runtime'
  }
}

关键注意事项 #

• chunks: 'all'：必须设置这个，Webpack 4 默认只处理异步加载的chunk，而你的原配置是针对entry chunks的，不设这个的话common和vendors不会生成。
• chunk.name 判断：原配置里的 _.without(_.keys(entry), ...) 逻辑，直接通过 chunk.name 匹配entry的key就能实现，不用再用lodash处理，更简洁。
• 优先级（priority）：一定要给vendors更高的优先级，不然部分第三方依赖可能会被分到common chunk里，导致拆分逻辑混乱。
• isVendorModule复用：你原来的 isVendorModule 函数完全可以直接用，只要它能正确识别第三方模块（比如判断module是否来自node_modules目录）。
• HtmlWebpackPlugin适配：如果你的项目用了这个插件，记得在配置里更新注入的chunk顺序，比如：

  new HtmlWebpackPlugin({
    chunks: ['runtime', 'vendors', 'common', '你的其他entry名称'],
    // ...其他配置
  })
  

常见踩坑点排查 #

如果升级后出现重复打包、chunk不生成的问题：

1. 检查 splitChunks.chunks 是否设为 all；
2. 确认 cacheGroups 里的 test 和 chunks 规则是否和原配置一致；
3. 开启 reuseExistingChunk 避免重复打包相同模块；
4. 查看Webpack打包日志，看模块被分配到了哪个chunk，调整优先级或规则。

内容的提问来源于stack exchange，提问作者KorHosik