首页
学习
活动
专区
圈层
工具
发布
技术百科首页 >Vite >Vite 是如何实现闪电般热更新(HMR)的?

Vite 是如何实现闪电般热更新(HMR)的?

词条归属:Vite

Vite 的 HMR 让开发者修改代码后,浏览器能在极短时间内更新对应模块,而无需刷新整个页面或重启服务器。

1. 基于 ESM 的增量更新

Vite 利用原生 ESM 的模块结构,保存文件时只让被修改的模块及其直接依赖者失效,浏览器通过 import.meta.hot 接口接收更新并替换对应模块,其余模块不受影响。

2. 服务器感知文件变化

开发服务器监听文件系统事件,一旦某个源文件被修改,立即定位到受影响的模块边界,并通过 WebSocket 把更新推送到浏览器,实现毫秒级响应,且更新速度与项目规模基本无关。

3. 保留应用状态

由于只替换变更的模块而非重载整页,组件状态、表单输入、异步操作等运行时状态得以保留,开发者可以即时看到改动效果,显著缩短反馈循环。

相关文章
Vite 热更新(HMR)原理了解一下
大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder
前端柒八九
2024-04-30
2.5K0
webpack 热更新(HMR)实现原理
HMR(Hot Module Replacement)是webpack一个重要的特性,当代码文件修改并保存之后,webapck通过watch监听到文件发生变化,会对代码文件重新打包生成两个模块补丁文件manifest(js)和一个(或多个)updated chunk(js),将结果存储在内存文件系统中,通过websocket通信机制将重新打包的模块发送到浏览器端,浏览器动态的获取新的模块补丁替换旧的模块,浏览器不需要刷新页面就可以实现应用的更新。
伯爵
2020-04-27
3.9K0
Vite 开发环境热更新失效的排查:从 HMR 边界到依赖预构建
在维护一个基于 Vite 的中后台项目时,我遇到过几次热更新突然失灵的情况:改完代码浏览器没有反应,控制台里看不到 [vite] hmr update 日志,只能手动刷新才能看到变化。热更新失效不像构建报错那样直接,它往往没有红色错误提示,排查起来更依赖对 Vite 工作机制的理解。常见诱因包括模块被 HMR 边界排除、循环依赖导致更新链断裂、被 optimizeDeps 预构建的依赖没有触发重新打包,以及文件监听器在 WSL 或 Docker 环境下失效。这篇文章会结合真实的调试过程,梳理 Vite HMR 的传播逻辑,给出几种典型失效场景的定位方式,并整理出一套可以复用的排查顺序,让下次再遇到“改了没反应”时能更快找到根因。
超哥前端记录
2026-09-16
1360
webpack中的HMR(热更新)原理剖析
Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。
winty
2019-12-21
2K0
Vite 开发服务器热更新失效?从 WebSocket 连接排查到 HMR 边界分析
本地开发时 Vite 的热更新突然不工作,改完代码浏览器没有任何反应,控制台也不报错,只能手动刷新。这种现象在多人协作项目里出现的频率不低,尤其是从 Webpack 迁移过来、或者项目里同时存在多个构建工具的时候。Vite 的 HMR 依赖客户端和服务端之间的一条 WebSocket 长连接,服务端通过 chokidar 监听文件变化,经过插件容器处理后再把更新推给客户端。任何一个环节断掉,表现都是「改了没反应」,但原因可能完全不同。这篇文章从实际的排查路径出发,覆盖 WebSocket 连接状态、HMR 边界声明、文件监听范围、插件顺序、monorepo 软链等几个高频触发点,同时给出对应的代码验证方式,而不是只停留在「重启试试」的层面。
超哥前端记录
2026-10-09
240
点击加载更多
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
领券