什么是 HMR（热模块替换）？它的原理是什么？

HMR 让代码改动后只更新变化的模块，不刷新整页，保留应用状态，极大提升开发体验。

原理：

1. 启动一个 WebSocket 连接，服务端监听文件变化
2. 文件改动 → 服务端用 webpack 重新编译出该模块的补丁（diff）
3. 通过 WS 把补丁 hash + 模块代码推给浏览器
4. 浏览器端的 HMR runtime 用新模块替换旧模块，并执行该模块的 module.hot.accept 回调做局部更新

// 模块自我接受热更新
if (module.hot) {
  module.hot.accept('./component.js', () => render())
}

若没有 accept 回调或更新无法局部应用，HMR 会回退为整页刷新。

同分类其他题目