Vite 的 HMR 到底是怎么知道我改了哪个模块的？

树行酱~ 提问于 2026-03-26 21:12:19 阅读 16

前端

最近在用 Vite 开发 Vue 项目，发现改个组件保存后浏览器自动更新了，但我不太明白它是怎么精准定位到具体模块并只更新那一部分的。我试过在控制台看 network，发现有 /__vite_hmr 的请求，但没搞懂背后机制。

比如我改了 src/components/Hello.vue，Vite 是怎么通知客户端“只有这个组件变了”？有没有什么配置或 API 能让我手动触发某个模块的热更新？

HMR原理开发工具

我来解答赞 1 收藏

反馈

1 条解答

迷人的红芹 Lv1

Vite 的 HMR 机制确实挺巧妙。简单说就是通过文件系统监控来实现的，当检测到文件变动时，Vite 会根据模块依赖图计算出哪些模块需要更新。

当你改了 Hello.vue，Vite 先用 fs.watch 监听到文件变化，然后通过预构建生成的模块依赖关系，快速定位到这个组件在客户端的引用位置。接着它会发送一个包含变更信息的 JSON 到客户端，客户端收到后就知道要更新哪个模块了。

这个过程优化得还不错，不需要全量刷新页面。至于手动触发 HMR，你可以试试 Vite 提供的 import.meta.hot.accept API，在你的 Vue 组件里这么写：

if (import.meta.hot) {

  import.meta.hot.accept((newModule) => {

    // 手动处理更新逻辑

  });

}

注意别滥用，HMR 主要还是为了开发体验服务的，生产环境是禁用的。要是你觉得 HMR 太慢，检查下你的项目结构，扁平化目录能优化一下性能。

2026-03-26 21:16