Vite 通过浏览器原生 ESM 实现极速 HMR：跳过打包、按需编译、依赖图静态分析、内存缓存及模块级精准更新。
Vite 利用浏览器原生 ESM 特性实现极快的热更新（HMR），核心在于跳过传统打包、按需编译、精准依赖追踪和模块级更新——不是靠“优化打包”，而是根本绕开了打包。
利用浏览器原生 ESM 加载，跳过构建时打包
Vite 开发服务器不把整个项目打包成 bundle，而是直接以裸 ESM 形式提供源码（如 import { foo } from './utils.js'）。浏览器通过原生 import 请求单个模块，Vite 只对当前请求的文件做轻量转换（如解析 JSX、TypeScript、CSS 等），其余模块保持原始结构。这意味着修改一个组件，Vite 无需重跑整个依赖图，只处理该文件及其直系 HMR 边界内模块。
- 源码以真实路径暴露（如
/src/App.vue→http://localhost:5173/src/App.vue），无 bundler 生成的虚拟路径 - ESM 的静态导入语法让 Vite 能在服务启动时快速建立模块依赖图，为精准 HMR 提供基础
- 不需要等待 Webpack 那样的全量依赖分析或 chunk 生成，冷启和热更都省去打包开销
按需编译 + 模块缓存，避免重复处理
Vite 内置内存缓存机制：每个已处理的模块（经插件转换后）会以内容哈希为 key 缓存结果。只要文件没变，下次请求直接返回缓存；一旦文件变更，仅重新编译该模块，并通知依赖它的模块更新。
- TS/JSX 文件只在首次请求或内容变更时转译，后续复用缓存结果
- Vue/Svelte 单文件组件被拆解为逻辑、模板、样式三部分分别缓存，改模板不影响逻辑缓存
- 第三方依赖（如
node_modules中的包）经预构建（esbuild）后也缓存为 ESM 格式，避免每次请求重复解析
精准 HMR 边界与模块级更新
Vite 的 HMR 不是刷新页面，也不是替换整个模块树，而是基于 ESM 的 import/export 关系，只更新**直接受影响的模块及其调用者**。例如：
立即学习“Java免费学习笔记（深入）”；
- 修改一个工具函数
utils/format.js，Vite 仅使导入它的组件触发import.meta.hot.accept()回调，执行局部重载 - Vue 组件中修改 template，Vite 仅重编译其 SFC 的 template 块，并注入新 render 函数，state 和逻辑实例保持不变
- 导出方式必须是具名/默认 export（ESM 要求），否则 HMR 无法建立正确绑定关系
开发者可主动配合提升 HMR 效果
原生 ESM 是基础，但写法会影响 HMR 精准度。建议遵循以下实践：
- 避免动态
import()中使用变量拼接路径（如import(`./pages/${name}.js`)），这会让 Vite 无法静态分析依赖 - 组件尽量保持单一职责，减少跨模块状态耦合，降低 HMR 传播范围
- 在自定义 Hook 或工具函数中导出纯函数，避免闭包捕获难以更新的外部引用
- 使用
import.meta.hot手动接管更新逻辑（如保留表单输入值、滚动位置），弥补自动 HMR 的局限
不复杂但容易忽略：Vite 的快，本质是回归浏览器本意——让 ESM 做它该做的事，而不是用打包器模拟它。
