首页
学习
活动
专区
圈层
工具
发布
技术百科首页 >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
1050
webpack中的HMR(热更新)原理剖析
Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。
winty
2019-12-21
2K0
如何实现Vuex的热更新
我们在使用Vuex的时候,会时不时的更改Vuex内的数据,但是页面不会随之更新,如果数据量大,一个数据依赖另一个数据的话,这样我们要是再刷新页面的话会把以前依赖的数据清空,效率特别低。所以,今天我总结了怎么实现Vuex热更替的功能。
Vam的金豆之路
2021-12-01
1.3K0
点击加载更多
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
领券