Webpack：如何将CommonsChunkPlugin（wp3）迁移到optimization.splitChunks（wp4）？

Question

我试图从webpack3迁移到webpack4，但是在迁移 CommonsChunkPlugin 阶段遇到了很大的问题。

在WP3中，我有以下简化配置：

const entries = {
  client: './src/index.js',
  common1: ['lodash'],
  common2: ['react', 'react-dom']
};

module.exports = {
  ...
  entry: entries,
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['common1', 'common2'],
      minChunks: Infinity
    })
  ]
};

在WP4中，我已经尝试过使用optimization.splitChunks进行多种组合，但我无法使它们正确地捆绑我的模块，以便它们共享公共依赖项，就像在WP3上一样。

以下是我在最后一次尝试中使用的内容，但最终的捆绑包大小要大得多：

// same entries object
const entries = { ... };

module.exports = {
  ...
  entry: entries,
  optimization: {
    splitChunks: {
    minChunks: Infinity,
    chunks: 'initial',
    cacheGroups: {
      common1: { test: 'common1' },
      common2: { test: 'common2' },
      // disables the default definition of these cache groups
      vendors: false, 
      default: false
    }
  }
};

- fabiomcosta

---

顺便提一下（可能是复制错误），entries 属性应该是 entry。 - sdgluck

@sdgluck 正确！这是一个打字错误，我会更新帖子的，谢谢！ - fabiomcosta

Answer 1

您可以简单地设置enforce = true，这将“强制”webpack始终为缓存组创建块。

如果您正在进行代码拆分（使用import()），则应设置chunks = "all"，因为使用"initial"仅对同步模块进行分组。

最后，如果组“common1”和“common2”可能共享任何模块，则可以考虑使一个缓存组的优先级高于另一个，例如如果“common1”可能会首先加载，则应该具有更高的优先级，以便“common2”不需要作为依赖项下载。

一些有用的链接可帮助您解决这些问题：

1. https://medium.com/dailyjs/webpack-4-splitchunks-plugin-d9fbbe091fd0
2. https://webpack.js.org/plugins/split-chunks-plugin
3. https://dev59.com/V1UM5IYBdhLWcg3wUe5R#49213048

module.exports = {
  ...
  entry: entries, // entries -> entry
  optimization: {
    splitChunks: {
      cacheGroups: {
        common1: {
          test: 'common1',
          chunks: 'all',
          enforce: true
        },
        common2: {
          test: 'common2',
          chunks: 'all',
          enforce: true
        },
        // disables the default definition of these cache groups
        vendors: false, 
        default: false
      }
    }
};

- sdgluck