vite在typescript项目中实现hmr依赖服务端依赖图谱、websocket通信和客户端运行时接管三者协同：服务端通过modulegraph精准定位变更模块并快速重解析，websocket推送结构化更新消息，客户端需显式调用import.meta.hot api声明热替换逻辑，且需满足es2020+目标、esnext模块等配置要求。
Vite 在 TypeScript 项目中实现热模块替换（HMR），靠的是“服务端依赖图谱 + WebSocket 实时通信 + 客户端运行时接管”三者协同，不是开箱即用的黑盒，而是有明确分工和配合要求。
服务端精准定位变更模块
Vite 启动时会构建完整的模块依赖图（ModuleGraph），把每个 .ts 文件、.vue 文件、甚至 CSS 模块之间的 import 关系都记录下来。当你修改一个 TypeScript 文件，Vite 不会全量重编，而是顺着依赖图向上回溯，只重新解析该文件及其直接受影响的模块（比如它导出被谁 import 了）。这个过程极快，因为跳过了打包环节，直接基于原生 ESM 提供更新模块代码。
- 依赖图由 Vite 内部
ModuleGraph类维护，映射关系包括urlToModuleMap、fileToModulesMap等 - 文件监听使用
chokidar，响应毫秒级，变更后立刻触发边界计算 - TS 类型检查由
vite-plugin-checker或fork-ts-checker-webpack-plugin（非默认）异步处理，不影响 HMR 主流程
WebSocket 推送变更通知
Vite 开发服务器内置 WebSocket 服务，与浏览器中的 @vite/client 建立长连接。一旦确定要更新的模块，服务端就通过 WebSocket 发送结构化消息，例如：
- 消息含模块路径、时间戳、更新类型（js-update / css-update / custom-update）
- 客户端收到后，按路径拉取新模块的 ESM URL（如
/@vite/client?import形式） - 不走完整 reload，只 fetch 变更部分，避免 DOM 重建
TypeScript 模块需显式声明可热替换
纯 TS 文件默认不会自动 HMR——Vite 不像 Vue 插件那样封装好逻辑。你需要手动调用 import.meta.hot API 告诉运行时：“我允许被替换”。否则，哪怕服务端推送了，客户端也会 fallback 到页面刷新。
- 基础写法：
import.meta.hot?.accept(() => { /* 重新执行模块逻辑 */ }) - 接受依赖更新：
import.meta.hot?.accept('./utils.ts', (newMod) => { /* 使用 newMod 替换旧逻辑 */ }) - 清理副作用：
import.meta.hot?.dispose(() => { /* 清理定时器、事件监听等 */ }) - Vue/Svelte 组件之所以“开箱即热”，是因为
@vitejs/plugin-vue在编译阶段自动注入了这些 HMR 调用
配置与环境要求
HMR 在 Vite 中默认启用，但 TypeScript 项目需注意几个隐性前提：
-
vite.config.ts无需额外配hot: true（Vite 默认开启），但需确保没禁用：检查是否误设server.hmr: false - TS 编译目标建议设为
"target": "ES2020"或更高，保证import.meta可用；"module"推荐"ESNext"，便于依赖分析 - 若用
ts-loader或自定义 TS 处理逻辑，需确认未覆盖或屏蔽import.meta.hot的注入 - 开发时访问的必须是 Vite 启动的本地服务（
http://localhost:xxx），而非直接打开 HTML 文件，否则 WebSocket 连接失败
