Question

我理解在webpack上完成的伟大工作4.特别是重写代码拆分插件。但是，由于它仍然有点新，我没有找到关于新SplitChunksPlugin的好文档。

我在选择的术语的含义上挣扎。例如：

块：有3个可能的值“initial”，“async”和“all”。这是什么意思？初始块是条目？异步动态导入？一切都是初始+异步？如果我使用initial，那么我的动态导入块将无法利用代码拆分？例如。 main.tsx动态导入about.tsx，它正常导入lodash。 Lodash不会被提取到供应商包吗？

强制执行：我看到很多设置强制执行的配置：true，这是什么意思？

为了更好的上下文，我发布了一个splitChunks配置的例子。

optimization: {
    splitChunks: {
      cacheGroups: {
        'commons': {
          minChunks: 2,
          chunks: 'all',
          name: 'commons',
          priority: 10,
          enforce: true,
        },
      },
    },
  },

Answer 1

事实上，虽然实际上有一些官方文件：https://webpack.js.org/plugins/split-chunks-plugin/

以下文章可能更有用：https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366

我特别发现以下非常有启发性的内容：

新的块图引入了一个新对象：ChunkGroup。 ChunkGroup包含Chunks。

在入口点或异步拆分点处引用单个ChunkGroup，这意味着并行包含所有Chunks。可以在多个Chunk中引用ChunkGroups。

Chunk之间不再存在父子关系，而ChunkGroups之间现在存在这种关系。

现在可以表达Chunks的“分裂”。新的Chunk已添加到所有ChunkGroups，其中包含来源Chunk。这不会对父母关系产生负面影响。

Webpack 4 Split Chunks条款

1 个答案: