缓存判断机制:文件路径 + mtime(文件修改时间)
✔️ 缓存依赖的组件:
ModuleGraph:Vite 内部维护的模块依赖图(在 vite/src/node/server/moduleGraph.ts 中实现)。
每个模块都有:
url / id:模块的唯一标识(通常是文件路径)
lastHMRTimestamp:用于判断该模块是否需要更新
transformResult:缓存上一次的编译结果(插件 transform 之后的产物)
⚙️ 更新流程:
启动时:首次访问某模块,Vite 执行插件的 transform(),然后将结果缓存。
变更时(通过 chokidar 文件监听):
比较文件当前的 mtime 与上次缓存时间。
如果不同,清除缓存并重新执行 transform()。
并且触发相关模块的 HMR 更新。
✅ 优点:
精准依赖追踪。
避免无效编译,极大提升热更新速度。
✅ 2. .vue 文件被拆分的模块路径说明:
当浏览器访问 /src/App.vue,你看到的这些路径是 Vue SFC 的拆解与模块化处理结果。
请求路径 | 说明 | 编译方式 |
---|---|---|
/src/App.vue | 主模块,组合 template + script + styles | JS(聚合模块) |
/src/App.vue?type=script | 提取
|