Webpack 4 拆分块术语

Posted 2023-02-19

【中文标题】Webpack 4 拆分块术语

【英文标题】：Webpack 4 Split Chunks Terms

【发布时间】：2018-11-01 19:08:51

【问题描述】：

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

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

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

enforce：我看到很多配置都设置了enforce:true，这是什么意思？

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

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

【参考方案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。这不会对父母关系产生负面影响。