架构师AI杜

Appearance

ModuleGraph 核心功能实现 ​

这是一个模块图实现，展示了如何管理和追踪模块依赖关系。

项目结构 ​

04-core-feature/
├── src/
│   └── graph.js           # 模块图
├── test/
│   └── graph.test.js
├── package.json
└── README.md

核心功能 ​

1. 模块节点 ​

表示单个模块及其依赖关系。

功能:

  • 管理导入和导入者
  • 追踪转换结果
  • 计算模块深度
  • 序列化

2. 模块图 ​

管理所有模块及其关系。

功能:

  • 模块管理
  • 依赖追踪
  • 拓扑排序
  • 循环依赖检测
  • HMR 影响分析

使用方法 ​

安装依赖 ​

bash
npm install

运行测试 ​

bash
npm test

实现细节 ​

模块节点 ​

模块节点使用 Set 存储依赖关系：

javascript
this.imports = new Set()
this.importers = new Set()

模块图 ​

模块图使用 Map 存储模块：

javascript
this.idToModuleMap = new Map()
this.urlToModuleMap = new Map()
this.fileToModulesMap = new Map()

拓扑排序 ​

使用 DFS 进行拓扑排序：

javascript
const visit = (module) => {
  if (visited.has(module)) return
  
  visited.add(module)
  
  for (const imported of module.imports) {
    visit(imported)
  }
  
  result.push(module)
}

循环依赖检测 ​

使用递归栈检测循环：

javascript
if (recursionStack.has(module)) {
  // 找到循环
  const cycleStart = path.indexOf(module)
  const cycle = path.slice(cycleStart)
  cycles.push(cycle)
}

应用场景 ​

  • HMR - 查找受影响的模块
  • 代码分割 - 分析依赖关系
  • Tree-shaking - 移除未使用的代码
  • 缓存 - 优化构建性能

总结 ​

这个实现展示了模块图的核心概念和算法，包括：

  1. 模块节点 - 模块的基本表示
  2. 模块图 - 模块集合的管理
  3. 拓扑排序 - 依赖顺序确定
  4. 循环检测 - 依赖问题发现
  5. 影响分析 - HMR 支持

通过这个实现，可以深入理解模块依赖管理的原理和算法。