# vite原理：HMR 机制
# HMR 是什么
HMR（Hot Module Replacement）是热模块替换：
修改代码后，不整页刷新，只替换受影响模块，尽量保留页面状态。
# Vite 的 HMR 主流程
# 1）文件变更监听
Vite 通过文件系统监听（watch）感知源码变化。
# 2）定位模块边界
根据模块依赖图，找到被修改模块及其影响链路。
# 3）通过 WebSocket 推送更新消息
服务端把更新信息推给浏览器中的 HMR client。
# 4）浏览器拉取新模块并执行替换
客户端按协议执行 import 新模块，并触发框架级热更新逻辑（如 React Fast Refresh、Vue HMR）。
# 为什么比整页刷新体验好
- 保留部分运行状态（如表单输入）
- 修改反馈快
- 减少重新请求和重渲染开销
# import.meta.hot 的作用
你可以在模块里手动处理热更新：
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
console.log("模块已热更新", newModule);
});
}
1
2
3
4
5
2
3
4
5
这个能力在自定义状态管理、工具库调试中很有用。
# 失效与回退
当某些更新无法安全热替换时，Vite 会回退到整页刷新。
这不是失败，而是保证一致性的兜底机制。
# 框架层配合
- React：
@vitejs/plugin-react+ Fast Refresh - Vue：
@vitejs/plugin-vue提供 SFC 级别 HMR
Vite 提供底层通道，框架插件负责语义级更新。
# 小结
Vite 的 HMR 快，不只是“WebSocket 推消息”，而是：
文件监听 + 模块图定位 + 精准替换 + 框架适配 的整套机制协同。