Vite 默认启用HMR，天然支持Vue、React、Svelte组件及CSS/JS/TS模块热更新；可通过import.meta.hot手动控制accept、dispose等逻辑；仅限开发环境，需注意导出方式与插件配置。
在 Vite 中，HMR（模块热更新）是默认启用的，无需手动安装或配置 HMR 插件。Vite 自带完善的 HMR 能力，对 Vue、React、Svelte 等框架以及普通 JS/TS 模块都开箱即用。
哪些模块天然支持 HMR
Vite 会自动为以下情况注入 HMR 逻辑：
- 使用 import.meta.hot 的模块（如自定义逻辑、状态持久化）
- Vue 单文件组件（
.vue）——模板、样式、脚本修改都会热更新 - React 组件（配合
@vitejs/plugin-react）——函数组件和状态保留 - CSS 及预处理器（
.css、.scss、.less）——样式实时替换，不刷新页面 - 普通 JS/TS 模块——只要导出内容被 HMR 宿主模块监听，就能触发更新
手动控制 HMR：使用 import.meta.hot
当默认行为不够用（比如想保留组件实例状态、执行清理逻辑），可通过 import.meta.hot API 手动处理：
-
accept 自身更新：
import.meta.hot?.accept(() => { /* 更新后执行 */ }) -
accept 依赖模块：
import.meta.hot?.accept(['./utils.ts'], ([utils]) => { /* utils 更新后调用 */ }) -
dispose 清理副作用：
import.meta.hot?.dispose(() => { /* 卸载前清理定时器、事件监听等 */ }) -
decline 阻止更新：
import.meta.hot?.decline()（例如不希望某模块热更新）
注意：import.meta.hot 在生产环境为 undefined，务必做可选链判断或包裹在开发环境条件中。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
常见问题与调试技巧
HMR 不生效？先检查这些点：
- 确认运行的是
vite dev（非vite build），HMR 仅在开发服务器中可用 - 确保模块有具名导出或默认导出，且被其他模块静态 import —— 动态
import()需显式调用hot.accept - React 项目需启用
@vitejs/plugin-react（Vite 5+ 默认集成），否则函数组件可能整页刷新 - 若修改后无反应，打开浏览器控制台查看
[vite] hot updated:日志，确认模块是否被正确监听 - 全局状态（如 Redux/Pinia store）通常不受影响；但需避免在模块顶层创建新实例，否则 HMR 后会重复初始化
自定义插件中启用 HMR
如果你开发 Vite 插件并希望它参与 HMR，可在 handleHotUpdate 钩子中返回更新后的模块内容，并确保返回的模块满足 HMR 条件：
- 返回
{ map, code }对象，Vite 会将其作为新模块内容注入 - 若插件生成代码需响应 HMR，建议在生成代码中也写入
import.meta.hot相关逻辑 - 多数官方插件（如
vite-plugin-svg-icons）已内置 HMR 支持，直接使用即可
不复杂但容易忽略
