什么是模块热替换（HMR - Hot Module Replacement）？它的实现原理是什么？

什么是模块热替换（HMR - Hot Module Replacement）？

模块热替换（HMR） 是 Webpack 提供的一个核心功能（其他现代构建工具如 Vite 也具备类似机制）。它允许在应用程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面。

HMR 的核心价值：

保持应用状态（State）不丢失：例如，在调试一个复杂的表单或多层弹窗时，修改代码不会导致页面刷新而丢失已输入的数据或当前的视图状态。
节省开发时间：只更新修改的部分，无需重新编译整个项目和刷新页面，极大提升了开发体验（Feedback Loop）。
样式即时响应：修改 CSS/Less/Sass 时，更改会立即应用到页面上，类似于在浏览器的 DevTools 中直接修改样式。

HMR 的实现原理

HMR 的本质是在浏览器（Client）和本地开发服务器（Server）之间建立一个长连接（WebSocket），当本地文件发生变化时，服务端推送更新通知，客户端按需拉取最新的模块代码并进行局部替换。

整个流程可以分为以下 6 个关键步骤：

plaintext

[修改代码] 
   ↓
1. Webpack 监听到文件变化，增量编译
   ↓
2. 内部生成 Manifest (JSON) + Update Chunk (JS)
   ↓
3. DevServer 通过 WebSocket 向浏览器发送 hash 和 type
   ↓
4. 浏览器端 HMR Runtime 发起 HTTP 请求获取 Manifest 和 Chunk
   ↓
5. 浏览器端对比差异，替换旧模块，执行 module.hot.accept 回调
   ↓
[页面局部渲染完成，状态保留]

详细步骤拆解：

1. 监控文件与增量编译

当修改了某个文件并保存时，Webpack 的 File Watcher 监听到变更，触发增量编译。Webpack 会对比前后两次构建的差异，生成两个核心文件：

JSON 描述文件（Manifest）：包含本次更新的 hash 值以及被修改的模块列表（[hash].hot-update.json）。
JS 更新块（Chunk）：包含了修改后的模块的具体代码（[id].[hash].hot-update.js）。

2. WebSocket 双向通信

webpack-dev-server (WDS) 在启动时，会向浏览器注入一段 HMR Runtime（客户端运行时代码），并与服务端建立 WebSocket 长连接。

编译完成后，WDS 端的 HMR Server 会通过 WebSocket 向浏览器的 HMR Runtime 发送一个 hash 事件，告诉客户端：“代码有更新，最新的版本号是这个 hash”。

3. 客户端请求更新补丁

客户端的 HMR Runtime 收到更新通知后：

首先调用 hotDownloadManifest 方法，通过 Ajax/Fetch 请求获取 [hash].hot-update.json 描述文件。
拿到 Manifest 后，得知哪些模块发生了变化，随后调用 hotDownloadUpdateChunk 方法，通过动态创建 <script> 标签（JSONP 的方式）去下载对应的 [id].[hash].hot-update.js 代码块。

4. 模块替换与冒泡机制（Hot Module Accept）

新代码下载完成后，HMR Runtime 会开始执行模块替换逻辑：

删除旧模块：从全局的模块缓存（modules 对象）中删除旧的模块。
执行新代码：将最新的模块代码放入缓存并执行。
冒泡寻找更新边界（Accept Boundary）：
- HMR 机制不会自动知道如何更新所有的 JS 逻辑。代码中必须显式声明 module.hot.accept() 来接收更新。
- 如果当前修改的模块没有声明 accept，HMR Runtime 会沿着依赖树向上冒泡寻找父模块。如果一直找根节点（入口文件）都没有找到任何 accept 处理器，HMR 宣告失败，触发全页刷新（Fallback to Live Reload）。

为什么在写 React/Vue 时我们不需要手写 `module.hot.accept()`？

在实际开发中，我们很少在业务代码里手写 module.hot.accept()，是因为生态工具链幫我们做了这件事：

样式文件：style-loader 内部实现了 HMR 逻辑。当样式改变时，它直接找到对应 <style> 标签并替换其中的文本内容。
React：使用 React Refresh（或早期的 react-hot-loader），通过 Babel 插件在编译时为每个组件注入 HMR 代码，并配合全局状态管理保留组件状态。
Vue：vue-loader 利用 Vue 的组件化特性，自动为 .vue 单文件组件注入 HMR 逻辑，通过 Vue 内部的虚拟 DOM 机制进行组件的局部重渲染。

简易代码示例 (纯 JS 环境)

假设有一个 math.js 模块和一个 index.js 入口文件：

javascript

// math.js
export function add(a, b) {
  return a + b + 1; // 假设我们把这里的逻辑改了
}

// index.js
import { add } from './math.js';

function render() {
  console.log('Result:', add(1, 2));
}
render();

// 开启并处理 HMR
if (module.hot) {
  // 监听 math.js 的变更
  module.hot.accept('./math.js', function() {
    console.log('math.js 模块更新了！');
    render(); // 重新执行依赖该模块的逻辑
  });
}

总结

HMR 的核心原理是 构建工具增量编译 + WebSocket 变更通知 + 浏览器端 JSONP 拉取补丁 + 依赖树冒泡执行替换回调。它极大地提升了现代前端开发的调试效率。

右滑查看面试常问

播面