8. 从dependency graph 到 chunk graph

// Compilation.js

seal(callback) {
    ... // 各种hooks
    for (const preparedEntrypoint of this._preparedEntrypoints) {
        const module = preparedEntrypoint.module; // 获取入口模块
        const name = preparedEntrypoint.name; // 入口名称：entry中的key
        const chunk = this.addChunk(name); // 创建chunk
        const entrypoint = new Entrypoint(name); // 创建entryPoint(特殊的chunkGroup，表示来自entry)
        entrypoint.setRuntimeChunk(chunk); // 设置运行时所在的chunk
        // ...
        this.namedChunkGroups.set(name, entrypoint); // 缓存映射关系
        this.entrypoints.set(name, entrypoint); // 保存所有的 entryPoint
        this.chunkGroups.push(entrypoint); // 保存所有的chunkGroup

        GraphHelpers.connectChunkGroupAndChunk(entrypoint, chunk); // 链接chunkGroup和chunk
        GraphHelpers.connectChunkAndModule(chunk, module); // 链接chunk和module

        chunk.entryModule = module; // 给当前Chunk设置入口模块
        chunk.name = name;
        //...
    }
    buildChunkGraph(this, (this.chunkGroups.slice()));
    ... // 各种hooks
}

entry: {
    chunkMain: './src/simple/main.js',
},

class Entrypoint extends ChunkGroup {
   // constructor   
   isInitial() // 返回true，表示是初始chunkGroup
   setRuntimeChunk(chunk) // 设置运行时代码应该跟随哪一个chunk
   getRuntimeChunk() {..} //  
   replaceChunk(oldChunk, newChunk) {..} // 替换runtimeChunk
}

// inputChunkGroups: [EntryPoint]
const buildChunkGraph = (compilation, inputChunkGroups) => {
    // 共享变量定义

    /** @type {Map<AsyncDepsendenciesBlock, BlockChunkGroupConnection[]>} */
    // 注意：AsyncDepsendenciesBlock
    // BlockChunkGroupConnection: [{ originChunkGroupInfo, chunkGroup }]
    const blockConnections = new Map();
    // 新创建的chunkGroup
    const allCreatedChunkGroups = new Set();
    // chunkGroup的信息
    const chunkGroupInfoMap = new Map();
    /** @type {Set<DependenciesBlock>} */
    const blocksWithNestedBlocks = new Set(); // 暂时不确定用途❓
    // 步骤1：分析chunk应该包含的模块（可能会创建新的chunk,chunkgroup)
    visitModules(compilation, inputChunkGroups, chunkGroupInfoMap,
        blockConnections, blocksWithNestedBlocks, allCreatedChunkGroups);
    // 步骤2：链接
    connectChunkGroups(blocksWithNestedBlocks, blockConnections, chunkGroupInfoMap);
    // 步骤3：清理
    cleanupUnconnectedGroups(compilation, allCreatedChunkGroups);
}

const visitModules = (compilation, inputChunkGroups, chunkGroupInfoMap, blockConnections, blocksWithNestedBlocks, allCreatedChunkGroups) => {
    // 1. 变量声明和初始化
    
    // Iterative traversal of the Module graph
    // Recursive would be simpler to write but could result in Stack Overflows
    while (queue.length) {
        // 2. 处理依赖链上的同步依赖模块，延迟处理异步依赖block
        while (queue.length) {/*...*/}

        // 3. 处理 minAvailableModules 收缩的场景
        while (queueConnect.size > 0) {/*...*/}

        // 4. 处理异步依赖 block
        if (queue.length === 0) {/*...*/}
    }
}

const blockInfoMap = extraceBlockInfoMap(compilation);   

// extraceBlockInfoMap 核心逻辑
for (const module of compilation.modules) {
   blockQueue = [module];
   currentModule = module;
   while (blockQueue.length > 0) {
      block = blockQueue.pop();
      // 重新初始化blockInfoModules、blockInfoBlocks
      blockInfoModules = new Set();
      blockInfoBlocks = [];
      
      //...

      if (block.dependencies) {
         // 从dep中解析出关联的module，并保存到blockInfoModules中
         for (const dep of block.dependencies) iteratorDependency(dep);
      }

      if (block.blocks) {
          // iteratorBlockPrepare将block保存到blockInfoBlocks，并且
          // push到blockQueue，在下个循环中，会收集该block的信息
         for (const b of block.blocks) iteratorBlockPrepare(b);
      }

      const blockInfo = {
         modules: blockInfoModules,
         blocks: blockInfoBlocks
      };
      blockInfoMap.set(block, blockInfo);
}

const reduceChunkGroupToQueueItem = (queue, chunkGroup) => {
   for (const chunk of chunkGroup.chunks) {
      const module = chunk.entryModule;
      queue.push({
         action: ENTER_MODULE,
         block: module,
         module,
         chunk,
         chunkGroup
      });
   }
   chunkGroupInfoMap.set(chunkGroup, {
      chunkGroup,
      minAvailableModules: new Set(),
      minAvailableModulesOwned: true,
      availableModulesToBeMerged: [],
      skippedItems: [],
      resultingAvailableModules: undefined,
      children: undefined
   });
   return queue;
};

let queue = inputChunkGroups
   .reduce(reduceChunkGroupToQueueItem, [])
   .reverse();

let module, chunk, chunkGroup, chunkGroupInfo, block, minAvailableModules, skippedItems;

//...

while (queue.length) {
    // 2. 处理依赖链上的同步依赖模块，延迟处理异步依赖block
    while (queue.length) {
        const queueItem = queue.pop();        
        // 变量赋值：module、block、chunk、chunkGroup、chunkGroupInfo、minAvailableModules、skippedItems 

        switch (queueItem.action) {
            case ADD_AND_ENTER_MODULE: {/*..*/} // fallthrough, 没有break
            case ENTER_MODULE: {/*..*/} // fallthrough, 没有break
            case PROCESS_BLOCK: {/*..*/ break; }
            case LEAVE_MODULE: {/*..*/ break; }
        }
    }
    
    //...
}

if (minAvailableModules.has(module)) {
    // 父chunk已经包含过，这里先在跳过它，
    // 但是当 minAvailableModules 缩小时会重新检查（后面会给出具体的案例）
    skippedItems.push(queueItem);
    break;
}

// 建立chunk和module的连接
if (chunk.addModule(module)) {
    module.addChunk(chunk);
} else { // 如果已经包含了，则跳过
    break;
}

queue.push({action: LEAVE_MODULE, block, module, chunk, chunkGroup});

const blockInfo = blockInfoMap.get(block);               
const skipBuffer = [];
const queueBuffer = [];

// 遍历同步依赖模块
for (const refModule of blockInfo.modules) {
    // 如果当前chunk已经包含过该module，则跳过
    if (chunk.containsModule(refModule)) {
        continue;
    }
    // 如果最小可用模块集合包含该模块，说明该模块已经被父chunk加载过
    // 则考虑跳过（即当前chunk不需要再重复包含该模块）
    if (minAvailableModules.has(refModule)) {
        // 注意：action是 ADD_AND_ENTER_MODULE
        skipBuffer.push(/*.QueueItem..*/); 
        continue;
    }
    // 注意：action是 ADD_AND_ENTER_MODULE
    queueBuffer.push(/*.QueueItem..*/);
}

for (let i = skipBuffer.length - 1; i >= 0; i--) {
    skippedItems.push(skipBuffer[i]);
}
for (let i = queueBuffer.length - 1; i >= 0; i--) {
    queue.push(queueBuffer[i]);
}

// 遍历异步依赖block
for (const block of blockInfo.blocks) iteratorBlock(block);

if (blockInfo.blocks.length > 0 && module !== block) {
    blocksWithNestedBlocks.add(block);
}

const iteratorBlock = b => {
   // 1. blockChunkGroups缓存已经创建过chunkGroup的block
   // 如果该block已经创建过，则不重复创建
   let c = blockChunkGroups.get(b);
   
   if (c === undefined) { // 如果该block没有创建过chunkGroup，则创建
      //...
      c = compilation.addChunkInGroup(/*..*/);
      blockConnections.set(b, []);
   } else { //...

   // 2. 存储块block连接关系，以便稍后在需要时连接它
   blockConnections.get(b).push({
      originChunkGroupInfo: chunkGroupInfo,
      chunkGroup: c
   });

   // 3.queueConnect用来临时记录这期间发生的 chunkGroup的父子关系
   // key是父，value是子chunkGroup集合
   let connectList = queueConnect.get(chunkGroup);
   //...
   connectList.add(c);

   // 4.为该block创建QueueItem并添加到queueDelayed变量中
   // 延迟处理，所以叫xxxDelayed
   queueDelayed.push({
      action: PROCESS_BLOCK, // 注意
      block: b, // 注意
      module: module,
      chunk: c.chunks[0],
      chunkGroup: c
   });
};

while (queue.length) {
    //...
    
    // 3. 处理 minAvailableModules 收缩的场景
    while (queueConnect.size > 0) {
        // 3.1 收集该chunkGroup可以复用的模块集合 resultingAvailableModules
        for (const [chunkGroup, targets] of queueConnect) {       
            // 1. chunkGroup和targets是父子关系，收集父chunkGroup中的模块集合 记为 resultingAvailableModules
            
            for (const target of targets) {
                // 1. 给target(ChunkGroup类型)创建chunkGroupInfo并保存到chunkGroupInfoMap
                // 2. 将上述收集的resultingAvailableModules保存到chunkGroupInfo.availableModulesToBeMerged
                // 3. 将chunkGroupInfo添加到 outdatedChunkGroupInfo
            }
        }
        
        if (outdatedChunkGroupInfo.size > 0) { 
            // 3.2 计算 chunkGroup的 minAvailableModules，
            // 并 重新判断skippedItems和子chunkGroup
            for (const info of outdatedChunkGroupInfo) {
                let changed = false; // 关键：minAvailableModules 是否发生了变化

                // 1. 计算两个集合的交集（做了空间优化-集合对象复用，所以看起来很复杂）
                 for (const availableModules of availableModulesToBeMerged) {
                     //...
                 }

                 if (!changed) continue;

                // 2. 如果minAvailableModules（最小可复用模块）发生变化，
                // 则重新考虑之前跳过的模块（即info.skippedItems)

                // 3. 当前chunkGroup的minAvailableModules发送了改变，
                // 显然其子ChunkGroup的minAvailableModules需要被重新计算
                // 因此将这层父子关系添加到queueConnect，
                // 利用`while (queueConnect.size > 0) { ... } `进行重新计算
            }            
        }
    }
    
    //...
}

// a.js 
import b from './e'
import b from './f'
import(/* webpackChunkName: "c" */ './c')

// b.js 
import b from './f'
import b from './g'
import(/* webpackChunkName: "c" */ './c')

// c.js
export let c = 'c';

// webpack.config.js
entry: { a:'./a.js', b: 'b.js' }

let cachedMinAvailableModules = info.minAvailableModules; // 默认值是undefined
const availableModulesToBeMerged = info.availableModulesToBeMerged; // 集合数组

//...
for (const availableModules of availableModulesToBeMerged) {
   if (cachedMinAvailableModules === undefined) { // 第一集合的时候
       //...
       info.minAvailableModulesOwned = false;
   } else {
       if (info.minAvailableModulesOwned) { // 第三个集合的时候
           //...
       } else { // 第二个集合的时候
           //...
           const newSet = new Set();
           //...
           info.minAvailableModulesOwned = true;
       }
   }
   //...
}

// 2. Reconsider skipped items
for (const queueItem of info.skippedItems) {
   queue.push(queueItem);
}
info.skippedItems.length = 0;

while (queueConnect.size > 0) {
    //...

    // 3. Reconsider children chunk groups
    if (info.children !== undefined) {
       const chunkGroup = info.chunkGroup;
       for (const c of info.children) {
          let connectList = queueConnect.get(chunkGroup);
          if (connectList === undefined) {
             connectList = new Set();
             queueConnect.set(chunkGroup, connectList);
          }
          connectList.add(c);
       }
    }
    //...
}

while (queue.length) {
   while (queue.length) {/*...*/}
   
   //...
   
   if (queue.length === 0) {
      const tempQueue = queue;
      queue = queueDelayed.reverse();
      queueDelayed = tempQueue;
   }
}