前端Wiki/词条/热更新 HMR

热更新 HMR

定义修改代码后只替换变动模块、不刷新整个页面的开发时能力，是现代开发体验的分水岭

HMR（Hot Module Replacement）让浏览器在不丢应用状态（你填了一半的表单、当前的弹窗状态）的前提下替换掉修改过的模块。原理是开发服务器与浏览器维持一条 WebSocket，文件变动时服务器推送更新清单，浏览器命中模块补丁、执行模块的 accept 回调做局部替换——整页刷新的 live reload 是它的降级形态。

框架级支持是关键：React 的 React Fast Refresh、Vue 的 @vitejs/plugin-vue 都帮你把「模块更新」映射成「组件重渲染且保留状态」。CSS 热更新则更自然，style-loader 与 Vite 直接替换 style 标签。如果没接框架的热边界，改一个文件还是会整页刷新，所以「配了 webpack dev server 就一定有 HMR」是常见误解。

原理：WebSocket 推送模块补丁，局部替换不丢页面状态
React Fast Refresh / Vue 插件负责把模块更新映射为组件级重渲染
CSS 热更新是替换 style 标签，天然无状态可随意换

JavaScript

// vite.config.js —— 开箱即用，但可调优
export default {
  server: {
    hmr: {
      protocol: 'ws',
      host: 'localhost',
      overlay: true       // 编译错误以浮层显示在页面上
    }
  }
}

// 自定义热边界（框架未接管时才需要）：
if (import.meta.hot) {
  import.meta.hot.accept('./render.js', (newMod) => {
    // 只用新模块的渲染函数重画局部，不刷新页面
    newMod.render(document.getElementById('app'));
  });
}

// webpack 侧对应 devServer.hot: true（v4 起默认开启），
// 并配 ReactRefreshWebpackPlugin / VueLoaderPlugin 才生效

⚠ 常见误区

以为配了 dev server 就自动有 HMR——框架热边界没接照样全刷
在 accept 里还做整页 location.reload，状态保留被自己破坏
开发服务器与浏览器时间/协议（ws/wss）不一致导致热更新静默失效

🔗 相关词条Vite 与 esbuild 为什么需要构建工具