commonChunk 实现原理

Q: webpack commonChunk 底层实现原理

A: webpack 在 make 阶段进行模块的依赖收集，生成一个 dependency graph ，并确定模块之间的依赖关系。然后，在遍历图，根据依赖引用的次数，如果达到阈值就生成一个新的 chunk，然后将原来的依赖图的 chunk 进行删除，并创建一个引用指向新的 chunk 。同时,webpack 会生成一个 manifest.json 文件，用来管理和映射资源文件之间的依赖关系。

// Webpack manifest
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([
  ["manifest"],{
    // 模块标识符和对应的模块函数
    "moduleA": function(module, exports, require) {
        // 模块A的代码...
    },
    "moduleB": function(module, exports, require) {
        // 模块B的代码...
    },
    // 更多模块...

    // Chunk 映射和加载逻辑
    "0": [
        "moduleA", "moduleB" // 表示 chunk 0 包含模块A和模块B
    ],
    // 更多 chunk 映射...
  }
]);