[!info] 关联笔记

• 所属：开发服务器与 HMR
• 前置：双路径
• 后续：插件系统

Vite HMR 与模块图

这个概念为什么出现

没有模块图，热更新只能整页刷新。有了模块图，工具才能判断：谁依赖了变更模块，边界能否安全替换。

[!abstract] 一句话理解 HMR 精度取决于模块图边界 + 框架运行时是否接受补丁，不是“保存必局部更新”的魔法。

可观察实验

1. 只改展示组件文案 → 常局部更新且保留输入
2. 改入口副作用或无法接受边界 → full reload

pnpm dev
# 观察终端 hmr update / page reload 日志

模型

• 记录 import 图
• 变更模块向上寻找可接受边界
• 找不到则刷新页面

工程实践

• 重副作用初始化放入口
• 状态放框架 state，不依赖“模块单例碰巧存活”
• 自定义 HMR API 仅高级场景

本节总结

HMR 是模块图上的增量补丁协议；会读日志才能解释“为何这次刷新了”。

自测题

1. 改 .env 为何常需重启？

参考答案

环境变量在服务启动/构建注入路径上，通常不走组件 HMR 补丁协议。