HMR是构建工具提供的开发期能力，不刷新页面即可更新模块并保留状态；其依赖服务端监听、客户端WebSocket通信、模块动态替换及框架适配层，原生JS因ESM静态绑定而不支持。
JavaScript 本身不直接支持模块热替换（HMR，Hot Module Replacement），它是构建工具（如 Webpack、Vite）在开发阶段提供的能力，核心目标是：**不刷新页面，只更新被修改的模块及其依赖，保留应用当前状态**。
HMR 是怎么工作的
HMR 的本质是一套运行时通信 + 模块管理机制。它不是语言特性，而是由打包工具注入的客户端逻辑与服务端协调配合完成的：
- 服务端监听文件变化：当源码（如 .js、.vue 文件）保存时，构建工具重新编译变更模块，生成新的模块代码和一个“更新清单”（包含哪些模块变了、新模块 ID 和 hash）
- 客户端接收更新通知：浏览器里运行的 HMR 运行时（由构建工具自动注入）通过 WebSocket 或 EventSource 与本地开发服务器保持连接，收到更新后拉取新模块代码
-
按需替换模块：运行时尝试逐级检查模块是否支持 HMR（即是否调用了
module.hot.accept()或框架（如 React/Vue）的 HMR 插件已注册处理逻辑），对可接受更新的模块，用新代码替换旧模块的exports，并触发dispose（清理副作用）和apply（重置状态）生命周期 - 状态不丢失的关键在于“不销毁实例”：比如 React 组件更新时，HMR 插件会保留在 DOM 中的组件实例，仅替换其内部 render 方法或 state 初始化逻辑；Vue 单文件组件则会复用现有组件实例，重新挂载新定义
手动启用 HMR（以 Webpack 为例）
你不需要从零写 HMR 运行时，但可以主动控制模块如何响应更新：
- 在模块顶部检查
module.hot是否存在（仅开发环境有） - 调用
module.hot.accept('./dep.js', callback)声明：当依赖模块更新时执行回调（例如重新渲染 UI、重置配置） - 用
module.hot.dispose(callback)清理上一次模块中的副作用（如定时器、事件监听器、全局变量） - 注意：顶层模块（如入口文件）一般不直接 accept 自身，而是由框架插件接管（如
@pmmmwh/react-refresh-webpack-plugin）
if (module.hot) {
module.hot.accept('./utils.js', () => {
console.log('utils 已更新，可重新初始化逻辑');
// 例如：重新绑定按钮事件、刷新图表数据
});
module.hot.dispose(() => {
console.log('清理旧 utils 副作用');
// 如 clearTimeout(timerId)
});
}
为什么原生 JS 不支持？HMR 依赖什么
因为标准 JavaScript 模块（ESM）加载后是静态绑定、不可变的：import 在编译时确定，export 对象不可被外部替换。HMR 能工作，靠的是：
立即学习“Java免费学习笔记（深入）”；
-
构建工具劫持模块系统：Webpack 把你的 ES 模块包装成函数，用自定义的
__webpack_require__控制加载；Vite 则利用浏览器原生 ESM，通过动态import()加载新模块 URL，并 patch 模块缓存 - 运行时模块注册表：每个模块都有唯一 ID，导出对象被统一管理，替换时能定位到对应模块实例
-
开发者约定或框架适配层：纯 JS 模块默认不支持热更新；只有显式调用
accept或使用 React Refresh / Vue Loader 等插件，才具备“安全更新”的能力
实际开发中你该怎么做
- 用 Vite 或 Create React App 等现代工具链，默认开启 HMR，无需配置
- 遇到 HMR 失效（如改了组件却没更新），先确认是否在支持的文件类型中（.jsx/.tsx/.vue）、是否有语法错误阻断更新、是否误写了
module.hot.decline() - 调试时可打开浏览器控制台，在 Network 标签页查看
hot-update.json和.js更新请求，确认变更是否被正确捕获 - 避免在模块顶层写副作用代码（如直接调用
render()），应包裹进accept回调或组件生命周期内，否则更新后不会重新执行
基本上就这些。HMR 不是黑魔法，而是构建工具在可控边界内对模块系统的“温柔重写”。理解它依赖运行时介入和模块可管理性，比记住 API 更重要。
