webpack 核心编译器 七 节

excel2025-04-02 8:57

这个方法 _computeAffectedModules 主要用于计算受影响的模块，并更新它们的内存缓存状态，确保 Webpack 编译过程中所有模块的依赖关系得到正确处理。

  • 初始化缓存结构

    • 获取全局模块缓存 moduleMemCacheCache，如果不存在，则直接返回。
    • 初始化当前编译实例的 moduleMemCaches，用于存储本次编译的模块缓存。

  • 计算模块变化情况

    • 遍历已有的模块缓存，检查：

      • 构建信息是否变化（如果变化，则创建新的缓存，并标记模块为受影响）。
      • 模块的依赖引用是否变化（如果变化，重新计算引用信息，并标记模块为受影响）。
      • 如果模块无变化，则复用之前的缓存。
      • 如果模块没有构建信息，则标记为"受感染"模块，并删除缓存。

    • 处理新模块，为其创建缓存，并标记为受影响的模块。

  • 传播受影响的模块

    • 传播受感染的模块：

      • 如果某个模块受感染，则检查哪些模块引用了它，标记为受影响或受感染（取决于依赖类型）。

    • 传播受影响的模块：

      • 受影响的模块会影响其引用者，对其引用的模块进行相同处理，确保所有依赖正确更新。

  • 日志记录

    • 记录受影响的模块数量，包括：

      • 受影响模块的总数（新模块、变化模块、仅引用变化的模块等）。
      • 受感染模块的总数（没有构建信息的模块）。
      • 受影响模块的占比（相对于所有模块）。
js 复制代码 
/**
 * 计算受影响的模块并更新模块的内存缓存状态
 * 
 * 该方法主要用于计算哪些模块受到影响，并更新它们的内存缓存，同时标记可能受到感染的模块。
 * 主要逻辑包括：
 * 1. 处理已有的模块缓存，并判断模块是否发生变化
 * 2. 计算模块的引用信息，并比较是否有变化
 * 3. 计算受影响的模块集合
 * 4. 传播受影响模块的信息，确保所有依赖关系都被正确处理
 *
 * @private
 * @param {Set<Module>} modules 需要计算的模块集合
 */
_computeAffectedModules(modules) {
    // 获取全局的模块内存缓存
    const moduleMemCacheCache = this.compiler.moduleMemCaches;
    if (!moduleMemCacheCache) return;

    // 如果当前实例还没有模块缓存，则创建一个新的映射
    if (!this.moduleMemCaches) {
        this.moduleMemCaches = new Map();
        this.moduleGraph.setModuleMemCaches(this.moduleMemCaches);
    }

    // 获取模块图（ModuleGraph）和模块缓存
    const { moduleGraph, moduleMemCaches } = this;
    const affectedModules = new Set(); // 受影响的模块集合
    const infectedModules = new Set(); // 受感染的模块集合（可能影响其它模块）
    let statNew = 0; // 统计新添加的模块数
    let statChanged = 0; // 统计发生变化的模块数
    let statUnchanged = 0; // 统计未发生变化的模块数
    let statReferencesChanged = 0; // 统计仅引用发生变化的模块数
    let statWithoutBuild = 0; // 统计没有构建信息的模块数

    /**
     * 计算模块的引用信息
     * 
     * @param {Module} module 需要计算的模块
     * @returns {References | undefined} 返回模块的依赖引用信息
     */
    const computeReferences = module => {
        /** @type {References | undefined} */
        let references;
        for (const connection of moduleGraph.getOutgoingConnections(module)) {
            const d = connection.dependency;
            const m = connection.module;
            if (!d || !m || unsafeCacheDependencies.has(d)) continue;
            if (references === undefined) references = new WeakMap();
            references.set(d, m);
        }
        return references;
    };

    /**
     * 比较模块的引用信息是否发生变化
     * 
     * @param {Module} module 需要比较的模块
     * @param {References | undefined} references 旧的引用信息
     * @returns {boolean} 如果引用不同，返回 true
     */
    const compareReferences = (module, references) => {
        if (references === undefined) return true;
        for (const connection of moduleGraph.getOutgoingConnections(module)) {
            const d = connection.dependency;
            if (!d) continue;
            const entry = references.get(d);
            if (entry === undefined) continue;
            if (entry !== connection.module) return false;
        }
        return true;
    };

    // 记录没有缓存的模块
    const modulesWithoutCache = new Set(modules);
    
    // 遍历已有的缓存，检查模块是否发生变化
    for (const [module, cachedMemCache] of moduleMemCacheCache) {
        if (modulesWithoutCache.has(module)) {
            const buildInfo = module.buildInfo;
            if (buildInfo) {
                if (cachedMemCache.buildInfo !== buildInfo) {
                    // 模块构建信息发生变化，创建新的缓存
                    const memCache = new WeakTupleMap();
                    moduleMemCaches.set(module, memCache);
                    affectedModules.add(module);
                    cachedMemCache.buildInfo = buildInfo;
                    cachedMemCache.references = computeReferences(module);
                    cachedMemCache.memCache = memCache;
                    statChanged++;
                } else if (!compareReferences(module, cachedMemCache.references)) {
                    // 模块引用发生变化，创建新的缓存
                    const memCache = new WeakTupleMap();
                    moduleMemCaches.set(module, memCache);
                    affectedModules.add(module);
                    cachedMemCache.references = computeReferences(module);
                    cachedMemCache.memCache = memCache;
                    statReferencesChanged++;
                } else {
                    // 模块没有变化，保持旧缓存
                    moduleMemCaches.set(module, cachedMemCache.memCache);
                    statUnchanged++;
                }
            } else {
                // 没有构建信息，认为模块受感染
                infectedModules.add(module);
                moduleMemCacheCache.delete(module);
                statWithoutBuild++;
            }
            modulesWithoutCache.delete(module);
        } else {
            // 该模块不再使用，移除缓存
            moduleMemCacheCache.delete(module);
        }
    }

    // 处理那些没有缓存的新模块
    for (const module of modulesWithoutCache) {
        const buildInfo = module.buildInfo;
        if (buildInfo) {
            // 为新模块创建缓存
            const memCache = new WeakTupleMap();
            moduleMemCacheCache.set(module, {
                buildInfo,
                references: computeReferences(module),
                memCache
            });
            moduleMemCaches.set(module, memCache);
            affectedModules.add(module);
            statNew++;
        } else {
            infectedModules.add(module);
            statWithoutBuild++;
        }
    }

    /**
     * 计算影响类型
     * 
     * @param {readonly ModuleGraphConnection[]} connections 依赖连接
     * @returns {symbol|boolean} 返回影响类型
     */
    const reduceAffectType = connections => {
        let affected = false;
        for (const { dependency } of connections) {
            if (!dependency) continue;
            const type = dependency.couldAffectReferencingModule();
            if (type === Dependency.TRANSITIVE) return Dependency.TRANSITIVE;
            if (type === false) continue;
            affected = true;
        }
        return affected;
    };

    // 处理直接受感染的模块
    const directOnlyInfectedModules = new Set();
    for (const module of infectedModules) {
        for (const [referencingModule, connections] of moduleGraph.getIncomingConnectionsByOriginModule(module)) {
            if (!referencingModule) continue;
            if (infectedModules.has(referencingModule)) continue;
            const type = reduceAffectType(connections);
            if (!type) continue;
            if (type === true) {
                directOnlyInfectedModules.add(referencingModule);
            } else {
                infectedModules.add(referencingModule);
            }
        }
    }
    for (const module of directOnlyInfectedModules) infectedModules.add(module);

    // 处理直接受影响的模块
    const directOnlyAffectModules = new Set();
    for (const module of affectedModules) {
        for (const [referencingModule, connections] of moduleGraph.getIncomingConnectionsByOriginModule(module)) {
            if (!referencingModule) continue;
            if (infectedModules.has(referencingModule)) continue;
            if (affectedModules.has(referencingModule)) continue;
            const type = reduceAffectType(connections);
            if (!type) continue;
            if (type === true) {
                directOnlyAffectModules.add(referencingModule);
            } else {
                affectedModules.add(referencingModule);
            }
            const memCache = new WeakTupleMap();
            const cache = moduleMemCacheCache.get(referencingModule);
            cache.memCache = memCache;
            moduleMemCaches.set(referencingModule, memCache);
        }
    }
    for (const module of directOnlyAffectModules) affectedModules.add(module);

    // 记录受影响的模块信息
    this.logger.log(
        `${Math.round(
            (100 * (affectedModules.size + infectedModules.size)) / this.modules.size
        )}% (${affectedModules.size} affected + ${infectedModules.size} infected of ${this.modules.size}) modules flagged as affected (${statNew} new modules, ${statChanged} changed, ${statReferencesChanged} references changed, ${statUnchanged} unchanged, ${statWithoutBuild} were not built)`
    );
}

该方法用于优化模块缓存，确保 Webpack 在 HMR 或增量构建时，能够准确判断哪些模块发生了变化，从而减少不必要的重新构建，提高构建速度。

  1. 计算模块引用信息 (computeReferences)
  • 获取模块 ID
  • 计算模块的依赖项（存储为 modules 映射）
  • 计算模块的块（blocks），用于跟踪代码分块的变化

2 比较模块引用信息 (compareReferences)

  • 先比较模块 ID 是否发生变化
  • 再比较依赖的模块 ID 是否发生变化
  • 最后比较块信息是否变化 3 遍历所有模块缓存
  • 如果模块没有缓存，则创建新的缓存（statNew++）
  • 如果模块引用信息有变化，则更新缓存（statChanged++）
  • 如果模块未发生变化，则保留旧缓存（statUnchanged++）

4 日志记录

  • 计算受影响模块的百分比
  • 统计新建、修改和未改变的模块数量
js 复制代码 
/**
 * 计算受影响的模块，并更新与 ChunkGraph 相关的模块缓存
 * 
 * 该方法基于模块图 (ModuleGraph) 和块图 (ChunkGraph) 计算模块的依赖关系，判断模块是否发生变化，并更新缓存。
 * 主要逻辑：
 * 1. 计算模块的引用信息，包括模块 ID、依赖的模块 ID 和块信息。
 * 2. 比较当前模块的引用信息是否与之前存储的缓存一致，以确定模块是否发生变化。
 * 3. 根据模块的变化情况，创建新的缓存或保留旧缓存。
 *
 * @private
 */
_computeAffectedModulesWithChunkGraph() {
    // 获取模块的内存缓存
    const { moduleMemCaches } = this;
    if (!moduleMemCaches) return;

    // 创建一个新的缓存映射
    const moduleMemCaches2 = (this.moduleMemCaches2 = new Map());
    const { moduleGraph, chunkGraph } = this;
    const key = "memCache2"; // 用于存储新缓存的键
    let statUnchanged = 0; // 统计未发生变化的模块数
    let statChanged = 0; // 统计发生变化的模块数
    let statNew = 0; // 统计新创建的模块数

    /**
     * 计算模块的引用信息
     * 
     * @param {Module} module 需要计算的模块
     * @returns {{ id: ModuleId, modules?: Map<Module, string | number | undefined>, blocks?: (string | number | null)[] }}
     *    返回模块的 ID、依赖的模块 ID 和块信息
     */
    const computeReferences = module => {
        // 获取模块 ID
        const id = /** @type {ModuleId} */ (chunkGraph.getModuleId(module));

        /** @type {Map<Module, string | number | undefined> | undefined} */
        let modules;
        /** @type {(string | number | null)[] | undefined} */
        let blocks;

        // 获取模块的出边（依赖的模块）
        const outgoing = moduleGraph.getOutgoingConnectionsByModule(module);
        if (outgoing !== undefined) {
            for (const m of outgoing.keys()) {
                if (!m) continue;
                if (modules === undefined) modules = new Map();
                modules.set(m, /** @type {ModuleId} */(chunkGraph.getModuleId(m)));
            }
        }

        // 处理模块的代码分块（blocks）
        if (module.blocks.length > 0) {
            blocks = [];
            const queue = Array.from(module.blocks);
            for (const block of queue) {
                const chunkGroup = chunkGraph.getBlockChunkGroup(block);
                if (chunkGroup) {
                    for (const chunk of chunkGroup.chunks) {
                        blocks.push(chunk.id);
                    }
                } else {
                    blocks.push(null);
                }
                // 继续处理 block 内嵌的 blocks
                queue.push(...block.blocks);
            }
        }
        return { id, modules, blocks };
    };

    /**
     * 比较模块的引用信息是否发生变化
     * 
     * @param {Module} module 需要比较的模块
     * @param {object} references 之前缓存的引用信息
     * @param {string | number} references.id 模块 ID
     * @param {Map<Module, string | number | undefined>=} references.modules 依赖的模块映射
     * @param {(string | number | null)[]=} references.blocks 代码块信息
     * @returns {boolean} 如果引用信息没有变化，则返回 true
     */
    const compareReferences = (module, { id, modules, blocks }) => {
        // 先检查模块 ID 是否变化
        if (id !== chunkGraph.getModuleId(module)) return false;

        // 检查模块的依赖项是否变化
        if (modules !== undefined) {
            for (const [module, id] of modules) {
                if (chunkGraph.getModuleId(module) !== id) return false;
            }
        }

        // 检查代码块（blocks）是否变化
        if (blocks !== undefined) {
            const queue = Array.from(module.blocks);
            let i = 0;
            for (const block of queue) {
                const chunkGroup = chunkGraph.getBlockChunkGroup(block);
                if (chunkGroup) {
                    for (const chunk of chunkGroup.chunks) {
                        if (i >= blocks.length || blocks[i++] !== chunk.id) return false;
                    }
                } else if (i >= blocks.length || blocks[i++] !== null) {
                    return false;
                }
                // 继续处理 block 内嵌的 blocks
                queue.push(...block.blocks);
            }
            if (i !== blocks.length) return false;
        }
        return true;
    };

    // 遍历所有已有的模块缓存，检查模块是否发生变化
    for (const [module, memCache] of moduleMemCaches) {
        /** @type {{ references: { id: string | number, modules?: Map<Module, string | number | undefined>, blocks?: (string | number | null)[] }, memCache: WeakTupleMap<any[], any> }} */
        const cache = memCache.get(key);

        if (cache === undefined) {
            // 没有缓存，创建新的缓存
            const memCache2 = new WeakTupleMap();
            memCache.set(key, {
                references: computeReferences(module),
                memCache: memCache2
            });
            moduleMemCaches2.set(module, memCache2);
            statNew++;
        } else if (!compareReferences(module, cache.references)) {
            // 模块的引用信息发生变化，需要更新缓存
            const memCache = new WeakTupleMap();
            cache.references = computeReferences(module);
            cache.memCache = memCache;
            moduleMemCaches2.set(module, memCache);
            statChanged++;
        } else {
            // 模块未发生变化，保留旧缓存
            moduleMemCaches2.set(module, cache.memCache);
            statUnchanged++;
        }
    }

    // 记录日志，输出受影响的模块统计信息
    this.logger.log(
        `${Math.round(
            (100 * statChanged) / (statNew + statChanged + statUnchanged)
        )}% modules flagged as affected by chunk graph (${statNew} new modules, ${statChanged} changed, ${statUnchanged} unchanged)`
    );
}

这个方法是 Webpack 编译过程中的重要环节，确保模块在最终阶段正确处理，错误和警告被妥善记录，并生成相关的性能分析数据。

  • 清理任务 ：清空 factorizeQueue，释放内存。

  • 性能分析（Profile） ：计算各个阶段的并行因子，记录模块的执行耗时信息。

  • 计算受影响的模块 ：调用 _computeAffectedModules 确定哪些模块受到影响。

  • 触发 finishModules 钩子 ：调用 Webpack 插件钩子 finishModules，允许插件在此阶段执行额外操作。

  • 错误和警告处理：

    • 遍历所有模块，收集错误和警告信息。
    • 记录错误和警告，并存储到 this.errors 和 this.warnings 中。

  • 执行回调 ：最终执行 callback，标志 finish 方法执行完成。

js 复制代码 
/**
 * 完成编译过程，执行模块的最终处理步骤
 * 
 * @param {Callback} callback - 完成后的回调函数
 */
finish(callback) {
    // 清空因子队列，释放资源
    this.factorizeQueue.clear();

    // 如果启用了性能分析（profile），收集模块的性能信息
    if (this.profile) {
        this.logger.time("finish module profiles");

        // 导入并初始化并行因子计算器
        const ParallelismFactorCalculator = require("./util/ParallelismFactorCalculator");
        const p = new ParallelismFactorCalculator();
        const moduleGraph = this.moduleGraph;
        /** @type {Map<Module, ModuleProfile>} */
        const modulesWithProfiles = new Map();

        // 遍历所有模块，收集并计算并行因子
        for (const module of this.modules) {
            const profile = moduleGraph.getProfile(module);
            if (!profile) continue;
            modulesWithProfiles.set(module, profile);

            // 计算不同阶段的并行因子
            p.range(profile.buildingStartTime, profile.buildingEndTime, f => (profile.buildingParallelismFactor = f));
            p.range(profile.factoryStartTime, profile.factoryEndTime, f => (profile.factoryParallelismFactor = f));
            p.range(profile.integrationStartTime, profile.integrationEndTime, f => (profile.integrationParallelismFactor = f));
            p.range(profile.storingStartTime, profile.storingEndTime, f => (profile.storingParallelismFactor = f));
            p.range(profile.restoringStartTime, profile.restoringEndTime, f => (profile.restoringParallelismFactor = f));

            // 处理额外的工厂时间
            if (profile.additionalFactoryTimes) {
                for (const { start, end } of profile.additionalFactoryTimes) {
                    const influence = (end - start) / profile.additionalFactories;
                    p.range(start, end, f => (profile.additionalFactoriesParallelismFactor += f * influence));
                }
            }
        }
        
        // 计算最终的并行因子
        p.calculate();

        const logger = this.getLogger("webpack.Compilation.ModuleProfile");

        /**
         * 根据值的大小选择不同级别的日志输出
         * @param {number} value - 计算出的值
         * @param {string} msg - 日志信息
         */
        const logByValue = (value, msg) => {
            if (value > 1000) {
                logger.error(msg);
            } else if (value > 500) {
                logger.warn(msg);
            } else if (value > 200) {
                logger.info(msg);
            } else if (value > 30) {
                logger.log(msg);
            } else {
                logger.debug(msg);
            }
        };

        /**
         * 记录模块的性能数据
         * @param {string} category - 统计类别
         * @param {(profile: ModuleProfile) => number} getDuration - 获取时长的方法
         * @param {(profile: ModuleProfile) => number} getParallelism - 获取并行因子的方法
         */
        const logNormalSummary = (category, getDuration, getParallelism) => {
            let sum = 0;
            let max = 0;
            for (const [module, profile] of modulesWithProfiles) {
                const p = getParallelism(profile);
                const d = getDuration(profile);
                if (d === 0 || p === 0) continue;
                const t = d / p;
                sum += t;
                if (t <= 10) continue;
                logByValue(t, ` | ${Math.round(t)} ms${p >= 1.1 ? ` (parallelism ${Math.round(p * 10) / 10})` : ""} ${category} > ${module.readableIdentifier(this.requestShortener)}`);
                max = Math.max(max, t);
            }
            if (sum <= 10) return;
            logByValue(Math.max(sum / 10, max), `${Math.round(sum)} ms ${category}`);
        };

        // 分别计算不同阶段的并行因子
        logNormalSummary("resolve to new modules", p => p.factory, p => p.factoryParallelismFactor);
        logNormalSummary("resolve to existing modules", p => p.additionalFactories, p => p.additionalFactoriesParallelismFactor);
        logNormalSummary("integrate modules", p => p.restoring, p => p.restoringParallelismFactor);
        logNormalSummary("store modules", p => p.storing, p => p.storingParallelismFactor);
        logNormalSummary("restore modules", p => p.restoring, p => p.restoringParallelismFactor);

        this.logger.timeEnd("finish module profiles");
    }

    // 计算受影响的模块
    this.logger.time("compute affected modules");
    this._computeAffectedModules(this.modules);
    this.logger.timeEnd("compute affected modules");

    // 触发 `finishModules` 钩子，执行模块的最终处理
    this.logger.time("finish modules");
    const { modules, moduleMemCaches } = this;
    this.hooks.finishModules.callAsync(modules, err => {
        this.logger.timeEnd("finish modules");
        if (err) return callback(/** @type {WebpackError} */(err));

        // 冻结模块图，防止进一步更改
        this.moduleGraph.freeze("dependency errors");

        // 记录模块的错误和警告信息
        this.logger.time("report dependency errors and warnings");
        for (const module of modules) {
            const memCache = moduleMemCaches && moduleMemCaches.get(module);
            if (memCache && memCache.get("noWarningsOrErrors")) continue;

            let hasProblems = this.reportDependencyErrorsAndWarnings(module, [module]);

            // 处理模块的错误信息
            const errors = module.getErrors();
            if (errors !== undefined) {
                for (const error of errors) {
                    if (!error.module) {
                        error.module = module;
                    }
                    this.errors.push(error);
                    hasProblems = true;
                }
            }

            // 处理模块的警告信息
            const warnings = module.getWarnings();
            if (warnings !== undefined) {
                for (const warning of warnings) {
                    if (!warning.module) {
                        warning.module = module;
                    }
                    this.warnings.push(warning);
                    hasProblems = true;
                }
            }

            // 如果模块没有问题，则缓存结果
            if (!hasProblems && memCache) memCache.set("noWarningsOrErrors", true);
        }

        // 解除冻结状态
        this.moduleGraph.unfreeze();
        this.logger.timeEnd("report dependency errors and warnings");

        // 执行回调，标记 `finish` 方法完成
        callback();
    });
}
相关推荐
阿虎儿21 分钟前
MCP
前端
毕小宝34 分钟前
编写一个网页版的音频播放器，AI 加持，So easy!
前端·javascript
万水千山走遍TML34 分钟前
JavaScript性能优化
开发语言·前端·javascript·性能优化·js·js性能
Aphasia31135 分钟前
react必备JS知识点（一）——判断this指向👆🏻
前端·javascript·react.js
会飞的鱼先生1 小时前
vue3中slot（插槽）的详细使用
前端·javascript·vue.js
小小小小宇1 小时前
一文搞定CSS Grid布局
前端
0xHashlet1 小时前
Dapp实战案例002：从零部署链上计数器合约并实现前端交互
前端
知心宝贝1 小时前
🔍 从简单到复杂：JavaScript 事件处理的全方位解读
前端·javascript·面试
安余生大大1 小时前
关于Safari浏览器在ios＜16.3版本不支持正则表达式零宽断言的解决办法
前端
前端涂涂1 小时前
express查看文件上传报文，处理文件上传，以及formidable包的使用
前端·后端
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】05yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记06DeepSeek各版本说明与优缺点分析07苍穹外卖面试总结08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09RAG 实践- Ollama+RagFlow 部署本地知识库10✨分享我在飞书多维表格中使用DeepSeek的经历✨