Vite 是如何记录项目中所有模块的依赖关系的？

// 有节选
export class ModuleNode {
    url: string    					// 请求的 url
    id: string | null = null      	// 模块 id，由【文件系统路径 + 请求的query】构成
    file: string | null = null		// 文件名
    type: 'js' | 'css'
    importers = new Set<ModuleNode>()			// 引入当前模块的模块，即当前模块，被哪些模块 import
    importedModules = new Set<ModuleNode>()		// 已经引入的模块，即当前模块 import 的模块
    acceptedHmrDeps = new Set<ModuleNode>()		// 热更新相关
    isSelfAccepting?: boolean							// 该模块自身是否能够进行热更新
    transformResult: TransformResult | null = null		// 模块编译后的代码，会被存储到这里
    lastHMRTimestamp = 0								// 热更新相关
    lastInvalidationTimestamp = 0						// 热更新相关
}

// 删除了修改了一些代码，更能关注核心内容，这样更好理解

// 引用的是依赖预构建后的 Vue 代码
import {defineComponent as _defineComponent} from "/node_modules/.vite/deps/vue.js?v=59dd26a1";
import "/src/App.vue?vue&type=style&index=0&scoped=7a7a37b1&lang.css";
import HelloWorld from "/src/components/HelloWorld.vue";

// 定义组件，这里其实是 script 部分
const _sfc_main = /* @__PURE__ */ _defineComponent({
  __name: "App",
  setup(__props, {expose}) {
    expose();
    const __returned__ = {HelloWorld};
    Object.defineProperty(__returned__, "__isScriptSetup", {enumerable: false, value: true});
    return __returned__;
  }
});

// 渲染函数，这部分是由 template 模块编译而成
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return _openBlock(), _createElementBlock(_Fragment, null, [
    _hoisted_1,
    _createVNode($setup["HelloWorld"], {msg: "Vite + Vue"})
  ], 64);
}

// 将 render 函数设置到组件上
_sfc_main.render = _sfc_render
export default _sfc_main

export class ModuleGraph {
  urlToModuleMap = new Map<string, ModuleNode>()
  idToModuleMap = new Map<string, ModuleNode>()
  // 一个文件，可能对应多个 ModuleNode，例如 Vue 文件
  fileToModulesMap = new Map<string, Set<ModuleNode>>()

  // 通过 url 获取 ModuleNode
  async getModuleByUrl(
    rawUrl: string,
    ssr?: boolean,
  ): Promise<ModuleNode | undefined> {
    const [url] = await this.resolveUrl(rawUrl, ssr)
    return this.urlToModuleMap.get(url)
  }

  // 通过 id 获取 ModuleNode
  getModuleById(id: string): ModuleNode | undefined {
    return this.idToModuleMap.get(removeTimestampQuery(id))
  }

  // 通过 file 获取 ModuleNode
  getModulesByFile(file: string): Set<ModuleNode> | undefined {
    return this.fileToModulesMap.get(file)
  }

  // 将 ModuleNode 设置为失效的，用于热更新时，将之前编译好的模块代码失效
  invalidateModule(
    mod: ModuleNode,
    seen: Set<ModuleNode> = new Set(),
    timestamp: number = Date.now(),
  ): void;

  // 将所有 ModuleNode 设置为失效
  invalidateAll(): void;

  // 更新 ModuleNode 的依赖信息
  // 函数返回值为不再 import 的依赖的 Set 集合。
  // 即如果模块更新后，以前 import 的依赖，现在不再 import 了，则出现在会在返回值的 Set 集合对象中
  async updateModuleInfo(
    mod: ModuleNode,
    importedModules: Set<string | ModuleNode>,
    importedBindings: Map<string, Set<string>> | null,
    acceptedModules: Set<string | ModuleNode>,
    acceptedExports: Set<string> | null,
    isSelfAccepting: boolean,
    ssr?: boolean,
  ): Promise<Set<ModuleNode> | undefined>;

  // 确保该 url 创建过 ModuleNode，如果没有创建，则新创建 ModuleNode
  // 返回 ModuleNode
  async ensureEntryFromUrl(
    rawUrl: string,
    ssr?: boolean,
    setIsSelfAccepting = true,
  ): Promise<ModuleNode>;

  // CSS 文件使用 @import 引入 style 文件时，这个 style 文件是直接内联到当前的 CSS 文件中的
  // 由于内联到当前 CSS，因此浏览器只会请求一次当前 CSS 的模块
  // 因此这些 @import 文件的 ModuleNode，没有 url，只有 file 属性
  createFileOnlyEntry(file: string): ModuleNode;
}

export const render = () => {
  const el = document.querySelector<HTMLDivElement>('#app')!;
  el.innerHTML = `
    <h1>Project: ts-file-test</h1>
    <h2>File: accept.ts</h2>
    <p>accept test</p>
  `;
};
render();

// 如果没有下面这一段，修改代码后，整个页面会刷新
if (import.meta.hot) {
  // 调用的时候，调用的是老的模块的 accept 回调
  import.meta.hot.accept((mod) => {
    if (mod) {
      // 老的模块的 accept 回调拿到的是新的模块
      console.log('mod', mod);
      console.log('mod.render', mod.render);
      mod.render();
    }
  });
}

import { test } from './sub-module';
export const render = () => {
  const el = document.querySelector<HTMLDivElement>('#app')!;
  el.innerHTML = `
    <h1>Project: ts-file-test</h1>
    <h2>File: accept.ts</h2>
    <p>accept test2</p>
    <p>${test}</p>
  `;
};
render();

// 如果没有下面这一段，修改代码后，整个页面会刷新
if (import.meta.hot) {
  // 调用的时候，调用的是老的模块的 accept 回调
  import.meta.hot.accept((mod) => {
    if (mod) {
      // 老的模块的 accept 回调拿到的是新的模块
      console.log('mod', mod);
      console.log('mod.render', mod.render);
      mod.render();
    }
  });
}

export const test = 1234;

let needFullReload = false

// modules 为被修改的文件 file 的 ModuleNode，取值为 moduleGraph.getModulesByFile(file)
// 因为一个 file 可能对应多个 ModuleNode，因此需要循环遍历
for (const mod of modules) {
    invalidate(mod, timestamp, invalidatedModules)
    if (needFullReload) {
        continue
    }

    // 这个 Set 集合，用来存储热更新边界
    const boundaries = new Set()

    // 计算热更新边界，然后存储到 boundaries Set 中
    // mod 为当前修改的模块的 ModuleNode
    const hasDeadEnd = propagateUpdate(mod, boundaries)
    // 如果有 DeadEnd，例如，找不到热更新边界，就得整个刷新页面
    if (hasDeadEnd) {
        needFullReload = true
    }

    // 通过 websocket 通知 Vite 热更新 client，将页面重新刷新
    if (needFullReload) {
        ws.send({
            type: 'full-reload',
        })
        return
    }
}

function propagateUpdate(
  node: ModuleNode,
  boundaries: Set<{
    boundary: ModuleNode
    acceptedVia: ModuleNode
  }>,	// 热更新边界，执行该函数会往里面插入 ModuleNode
  currentChain: ModuleNode[] = [node],
): boolean {
	  // 当前模块，自身就有热更新逻辑，那就可以不用往上查找热更新边界了，直接 return false
      if (node.isSelfAccepting) {
          // 记录热更新边界，为当前模块
          boundaries.add({
              boundary: node,
              acceptedVia: node,
          })
          return false
      }

      // 没有 importers, 证明当前模块已经是最顶层的模块，没办法再往上查找了
      // return true，则表示是 DeadEnd，没办法进行热更新，需要刷新页面
      if (!node.importers.size) {
          return true
      }

      // 判断所有的 importer（引入被修改模块的模块）
      // 看看是不是都能进行热更新，如果有其中一个不能，就得刷新页面
      for (const importer of node.importers) {
          // importer（引入被修改模块的模块）能够自己进行热更新
          if (node.isSelfAccepting) {
              // 热更新边界就是 importer
              boundaries.add({
                  boundary: node,
                  acceptedVia: node,
              })
              // return false 表示不需要刷新页面了
              return false
          }

          // importer 不能进行热更新，需要往上查找
          // 将 importer 模块，加入到 subChain 数组
          // 表示已经检查过，但是它不能进行热更新，用于判断是否为循环依赖。
          const subChain = currentChain.concat(importer)
          if (importer.acceptedHmrDeps.has(node)) {
              boundaries.add({
                  boundary: importer,
                  acceptedVia: node,
              })
              continue
          }

          // 如果有循环依赖，就没办法热更新了，只能重新刷新页面了
          if (currentChain.includes(importer)) {
              return true
          }

          // 递归往上传播，补全热更新边界
          // propagateUpdate 为 true，则表示是 DeadEnd，没办法进行热更新，需要刷新页面
          if (propagateUpdate(importer, boundaries, subChain)) {
              return true
          }
      }
      // 如果所有的 importer 都能找到热更新边界，那就不需要刷新页面了
      return false
}