javascript如何实现模块热替换_它的原理是什么

admin 百科 2025-12-16 8

HMR是构建工具提供的开发期能力，不刷新页面即可更新模块并保留状态；其依赖服务端监听、客户端WebSocket通信、模块动态替换及框架适配层，原生JS因ESM静态绑定而不支持。

javascript如何实现模块热替换_它的原理是什么-第1张图片-佛山资讯网

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）

示例（简单 JS 模块）：

if (module.hot) {
  module.hot.accept('./utils.js', () => {
    console.log('utils 已更新，可重新初始化逻辑');
    // 例如：重新绑定按钮事件、刷新图表数据
  });

  module.hot.dispose(() => {
    console.log('清理旧 utils 副作用');
    // 如 clearTimeout(timerId)
  });
}

登录后复制