Webpack 4 分割代码块术语

Question

我了解webpack 4上进行的伟大工作，特别是重写代码拆分插件。然而，由于它仍然比较新，我找不到有关新SplitChunksPlugin的好文档。

我对所选术语的含义感到困惑。例如：

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

enforce：我看到很多配置将enforce设置为true，这是什么意思？

为了更好地理解，我发布了一个splitChunks配置示例。

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

- user3299310

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被添加到所有包含原始Chunk的ChunkGroups中。这不会对父级关系产生负面影响。

- Fernando Espinosa