SplitChunksPlugin

作用

配置文档

• webpack SplitChunksPlugin 配置文档

  默认cacheGroups

  在webpack/lib/webpack.js文件中，createCompiler时调用了applyWebpackOptionsDefaults函数，该函数会为cacheGroups设置两个默认值，这两个默认值就是webpack的默认分包原则，其中defaultVendors是应用于node_modules：

  F(cacheGroups, "default", () => ({
  idHint: "",
  reuseExistingChunk: true,
  minChunks: 2,
  priority: -20
  }));
  F(cacheGroups, "defaultVendors", () => ({
  idHint: "vendors",
  reuseExistingChunk: true,
  test: NODE_MODULES_REGEXP,
  priority: -10
  }));

  触发时机

  在Compilation.js文件中，调用seal方法时，当调用buildChunkGraph之后，就建立起了modules和chunks的关系，此时会开始触发hooks.optimizeChunks钩子：

  while (this.hooks.optimizeChunks.call(this.chunks, this.chunkGroups)) {
  /* empty */
  }

  此时会触发几个插件：

• RemoveEmptyChunksPlugin：

  for (const chunk of chunks) {
  // 移除不包含 runtime 的空 chunk
  if (
    chunkGraph.getNumberOfChunkModules(chunk) === 0 &&
    !chunk.hasRuntime() &&
    chunkGraph.getNumberOfEntryModules(chunk) === 0
  ) {
    compilation.chunkGraph.disconnectChunk(chunk);
    compilation.chunks.delete(chunk);
  }
  }
  

• MergeDuplicateChunksPlugin：

  // 合并”重复“的chunk。
  if (chunkGraph.canChunksBeIntegrated(chunk, otherChunk)) {
  chunkGraph.integrateChunks(chunk, otherChunk);
  compilation.chunks.delete(otherChunk);
  }
  

• SplitChunksPlugin：进行分包。

  SplitChunksPlugin

1. 遍历 modules 匹配对应 cacheGroups
2. 遍历 cacheGroups
3. 根据 module 调用 getCombsByUsedExports
   1. getExportsChunkSetsInGraph开始
   2. 遍历所有 modules
   3. 找到 module 所在的 chunks，并遍历 chunks
   4. 根据 chunk + module.exportsInfo => 得出变量使用情况，形成 key
   5. 存放到groupedByUsedExports中 key => [chunks]
   6. groupedByExportsMap 存放 module =>groupedByUsedExports.values()
   7. 如果 chunks 长度为1 singleChunkSets.add(chunks[0]);
   8. 否则 chunkSetsInGraph.set(chunksKey, newSet(chunks));
4. 遍历 groupedByExportsMap
5.