javascript - Webpack 4 拆分块术语

Question

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

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

chunks:有 3 个可能的值“initial”、“async”和“all”。这是什么意思？初始 block 是条目？异步动态导入？都是初始+异步？如果我使用 initial 那么我的动态导入 block 将不会利用代码拆分？例如。 main.tsx 动态导入 about.tsx，它正常导入 lodash。 Lodash 不会被提取到 vendor 包中？

enforce:我看到很多配置都设置了 enforce: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

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

The new chunk graph introduces a new object: the ChunkGroup. A ChunkGroup contains a Chunks.

At an entrypoint or an async splitpoint a single ChunkGroup is referenced, which means all containted Chunks in parallel. A Chunk can be referenced in multiple ChunkGroups.

There are no longer parent-child relationships between Chunk, instead this relationship now exists between ChunkGroups.

Now “splitting” of Chunks can be expressed. The new Chunk is added to all ChunkGroups, which contain the origin Chunk. This doesn’t affect parent relationships negatively.