Webpack:如何将 CommonsChunkPlugin (wp3) 迁移到 optimization.splitChunks (wp4)？

Question

我正在尝试从 3 迁移到 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
    }
  }
};

Answer 1

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

如果您正在执行代码拆分(使用 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://stackoverflow.com/a/49213048/2039244

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
      }
    }
};