前端analysis | 知其所以然

vite 文件路径 + mtime

2020-06-29

缓存判断机制:文件路径 + 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 提取