模块热替换（HMR）通过构建工具与运行时协作，实现代码更新不刷新页面。1. 构建工具监听文件变化并增量编译；2. 通过 WebSocket 将更新推送到浏览器；3. 运行时卸载旧模块、加载新模块；4. 模块需通过 module.hot.accept 等 API 主动支持更新；5. React Fast Refresh 和 vue-loader 等框架方案封装底层细节，提升开发体验。理解 HMR 原理有助于排查更新失效问题，如未注册 accept 回调或存在副作用。
模块热替换（Hot Module Replacement，简称 HMR）是现代前端开发中提升开发体验的重要技术。它允许在应用运行过程中，只替换、添加或删除发生变化的模块，而无需刷新整个页面。这在开发 React、Vue 等组件化应用时尤其有用，能保留当前应用状态的同时更新代码。
模块热替换的核心机制
HMR 的本质是一套基于事件通信的动态更新机制。它依赖于构建工具（如 Webpack 或 Vite）和运行时环境协同工作：
- 监听文件变化：构建工具通过文件监听系统检测源码修改。
- 增量编译：只重新编译发生变化的模块，生成新的模块内容。
- 运行时更新：通过 WebSocket 将更新推送到浏览器中的 HMR 运行时。
- 模块替换逻辑：运行时尝试卸载旧模块，加载新模块，并通知相关模块进行自我更新。
JavaScript 模块如何被“热替换”
JavaScript 中的 HMR 并非自动生效，需要模块主动声明可接受更新。关键在于模块与 HMR 运行时之间的契约：
- 每个支持 HMR 的模块可以通过 module.hot.accept 注册回调，当自身或依赖更新时执行。
- 例如，在一个 React 组件中，可以使用 if (module.hot) module.hot.accept() 告知系统该模块可热更新。
- 更高级的场景下，模块还可以通过 module.hot.dispose 清理副作用，或通过 module.hot.invalidate 主动拒绝更新并触发刷新。
框架层面的支持简化了 HMR 使用
大多数开发者并不直接操作 HMR API，而是通过框架插件实现无缝热更新：
立即学习“Java免费学习笔记（深入）”；
- React 使用 React Fast Refresh，它在底层利用 HMR 机制，但能智能地保持组件状态。
- Vue 通过 vue-loader 自动注入 HMR 支持，单文件组件修改后仅更新对应部分。
- 这些方案屏蔽了底层细节，开发者只需关注业务逻辑，热更新由工具链自动处理。
基本上就这些。HMR 不是魔法，而是构建系统与运行时协作的结果。理解其原理有助于排查热更新失效的问题，比如未正确暴露 accept 回调，或模块存在副作用导致无法安全替换。掌握这些细节，能让开发调试更高效。不复杂但容易忽略。
