3

我正在尝试从 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
    }
  }
};
4

1 回答 1

2

您可以简单地设置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://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
      }
    }
};

于 2018-08-08T09:32:51.250 回答