dependency graph

2024-11-28

dependency graph

构建过程：

1. 根据entry创建EntryDependency 对象
2. 调用NormalModuleFactory，根据EntryDependency对象的资源路径创建Module子类
3. 将module解析为ast
4. 遍历ast，找到模块导入语句（import/require）
5. 根据导入创建dependency子类对象
6. 递归执行步骤2，直到所有项目处理完

这个过程从 entry 模块开始，逐步递归找出所有依赖文件，模块之间隐式形成了以 entry 为起点，以模块为节点，以导入导出依赖为边的有向图关系 - Dependency Graph 模块依赖关系图。

Webpack5 重构 了 Dependency Graph 的具体实现，将依赖关系从 Dependence/Module 类型中解耦出来，形成以 ModuleGraph 为中心的若干独立类型，以一套独立的 Graph 数据结构记录模块间依赖关系，并基于 Map/Set 等原生模块实现更高效的模块搜索、校验、遍历算法。

作用

信息索引、辅助构建ChunkGraph

ModuleGraph与DependencyGraph

1. ModuleGraph

   • ModuleGraph是一个容器，用于记录构建过程中涉及到的所有module（模块）dependency（依赖）对象，以及这些对象之间的引用关系
   • 它提供了工具方法，使得用户可以快速读取module或dependency的附加信息
   • 在Webpack 5中，ModuleGraph通过_dependencyMap属性记录Dependency对象与ModuleGraphConnection连接对象之间的映射关系，通过_moduleMap在module基础上附加ModuleGraphModule信息，记录模块的引用与被引用关系

2. DependencyGraph

   • DependencyGraph通常指的是模块间的依赖关系图，它是一个更广泛的概念，可以由ModuleGraph来实现
   • 在Webpack中，DependencyGraph通过​​ModuleGraph​​ 、​​ModuleGraphConnection​​和​​ModuleGraphModule​​三者协作，在构建过程中逐步收集模块间的依赖关系
   • ModuleGraphConnection记录模块间的引用关系，ModuleGraphModule包含模块对象的incomingConnections（指向模块本身的ModuleGraphConnection集合）和outgoingConnections（该模块对外的依赖）

ModuleGraph是Webpack 5中用于记录和管理模块及其依赖关系的容器，而DependencyGraph是表示模块依赖关系的一个更通用的概念，ModuleGraph是实现DependencyGraph的一种方式。