首页
学习
活动
专区
圈层
工具
发布
技术百科首页 >Vite >Vite 的 HMR 边界是如何精确替换模块的?

Vite 的 HMR 边界是如何精确替换模块的?

词条归属:Vite

HMR 边界(HMR Boundary)决定了模块更新的影响范围,是 Vite 精确控制热更新粒度的关键机制。

1. 以模块边界限定影响范围

当文件被修改时,Vite 从被改动的模块出发,沿着 import 关系向上查找最近的 HMR 边界。边界内的模块会被重新执行,边界之外的模块完全不受影响,从而把更新范围收敛到最小。

2. 通过 accept 声明接受更新

开发者可以在模块中使用 import.meta.hot.accept() 声明自己能够处理来自依赖模块的更新,自定义更新逻辑(如只更新数据而不重渲染),实现更细粒度的状态保持。

3. 边界缺失时向上冒泡

如果某个模块及其依赖链上都没有声明接受更新,HMR 会持续向上冒泡,直到遇到可处理的边界;若始终没有,则回退为整页刷新,保证应用状态的一致性。

相关文章
Vite 开发环境热更新失效的排查:从 HMR 边界到依赖预构建
在维护一个基于 Vite 的中后台项目时,我遇到过几次热更新突然失灵的情况:改完代码浏览器没有反应,控制台里看不到 [vite] hmr update 日志,只能手动刷新才能看到变化。热更新失效不像构建报错那样直接,它往往没有红色错误提示,排查起来更依赖对 Vite 工作机制的理解。常见诱因包括模块被 HMR 边界排除、循环依赖导致更新链断裂、被 optimizeDeps 预构建的依赖没有触发重新打包,以及文件监听器在 WSL 或 Docker 环境下失效。这篇文章会结合真实的调试过程,梳理 Vite HMR 的传播逻辑,给出几种典型失效场景的定位方式,并整理出一套可以复用的排查顺序,让下次再遇到“改了没反应”时能更快找到根因。
超哥前端记录
2026-09-16
1050
React Hooks 在 react-refresh 模块热替换(HMR)下的异常行为
react-refresh-webpack-plugin[1] 是 React 官方提供的一个 模块热替换(HMR)插件。
桃翁
2021-05-13
3.1K0
Vite 热更新(HMR)原理了解一下
大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder
前端柒八九
2024-04-30
2.5K0
Vite 是如何记录项目中所有模块的依赖关系的?
Vite 在运行过程中,会记录每个模块间的依赖关系,所有的依赖关系,最终会汇总成一个模块依赖图。利用这个模块依赖图,Vite 能够准确地进行热更新。
CandyTong
2023-01-03
2.6K0
Vite 是如何记录项目中所有模块的依赖关系的?
Vite 在运行过程中,会记录每个模块间的依赖关系,所有的依赖关系,最终会汇总成一个模块依赖图。利用这个模块依赖图,Vite 能够准确地进行热更新。
CandyTong
2023-02-24
3.2K0
点击加载更多
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
领券