HMR模块热替换

HMR 的全称是 Hot Module Replacement ，中文叫模块热替换。它是现代前端开发（如使用 Webpack、Vite 等工具）中一项极其重要的"魔法"技术。

简单来说，HMR 允许你在应用程序运行的过程中，只替换、添加或删除发生变化的代码模块，而完全不需要刷新整个网页。

🎯 HMR 带来的核心好处

在没有 HMR 的传统开发中，你每改一行代码，浏览器就要整体刷新一次。而 HMR 带来了三大核心优势：

1. 保留应用状态（最强大的特性） ：页面不会完全刷新，这意味着你的应用状态会被完美保留。比如你正在填写一个复杂的表单，或者打开了一个深层的弹窗，修改样式或逻辑后，表单里的数据和弹窗的状态丝毫不会丢失。
2. 毫秒级的即时反馈：HMR 只会重新编译和传输你修改的那一小部分代码。相比整个页面重载，它的更新速度极快，能让你在编码时获得极其流畅的调试体验。
3. 大幅节省开发时间：在大型项目中，每次刷新可能需要几秒甚至十几秒。累积下来，HMR 能在整个开发周期中为你节省出数小时甚至数天的时间。

⚙️ HMR 是如何工作的？

HMR 并不是一个简单的文件监听器，它是一个由构建工具 （如 Webpack/Vite）、开发服务器 （Dev Server）和浏览器运行时（HMR Runtime）共同协作的精密系统。

当你保存代码时，后台会发生以下一连串动作：

1. 监听与编译 ：开发服务器监听到你修改了某个文件，构建工具会立刻进行增量编译，只重新打包发生变化的模块，并生成一个"更新包"。
2. 通知浏览器 ：开发服务器通过 WebSocket（一种长连接通信机制）主动告诉浏览器："嘿，我有新的代码更新了！"
3. 拉取更新：浏览器里的 HMR 运行时（Runtime）收到通知后，会通过 AJAX/JSONP 向服务器请求并下载这个最新的"更新包"。
4. 模块替换 ：HMR 运行时会尝试用新的模块代码替换掉旧的。
   • 如果该模块（或其父模块）配置了接受热更新（即代码中有 module.hot.accept() 这样的逻辑），它会安全地替换代码并执行新逻辑，页面不刷新。
   • 如果找不到任何接受更新的模块，HMR 就会降级处理，触发一次常规的整页刷新（Live Reload）。

💡 实际开发中的表现

在现代前端框架（如 Vue、React）中，HMR 的体验通常已经非常丝滑，这得益于框架自带的 loader 或插件（如 vue-loader、react-fast-refresh）已经帮我们处理好了底层的 HMR 接口：

• 修改 CSS/样式：几乎是瞬间生效，页面完全无感，状态绝对保留。
• 修改 Vue/React 组件：组件会重新渲染，但组件内部的 State（状态）通常会被保留下来。
• 修改纯 JS 逻辑：如果逻辑代码没有配置热更新接受接口，可能会触发整页刷新；但在配置完善的项目中，也能做到无刷新更新。

总的来说，HMR 是现代前端工程化的标配，它极大地提升了开发效率和编码时的"心流"体验。