前言

本文不会聚焦于某种构建工具的实现（比如 webpack），只会探讨底层基础技术 同时 js 宿主环境不局限于传统 Web 页面，还涵盖 Node, Electron, Chrome Extension 等等

本文中，js 宿主环境会统称为应用

热重载

在谈热更新前，我们先来说说另一种简单粗暴技术 -- 热重载

顾名思义，重载(reload)表示应用重启，会丢失状态。热重载(live reload)则表明文件出现变更，通知应用进行重载。对于 Web 页面，则表现为刷新页面

为方便起见，此处不讨论打包环节，项目代码是最传统的前端三件套

那么思考下这几个问题：

1. 怎么告知浏览器页面需要 reload
2. 打包的文件是放在内存还是磁盘中

web socket

EventSource

本质是长连接不断发数据

常见的 node 采用热重载

热更新

核心原理：构建工具有自己的一套模块系统，当代码产生变动后，构建端能够找到变更的模块，并告知客户端重新请求并执行这些模块以及上层依赖模块

具体细节：

1. watch 模式下，会监听文件变更，并进行重打包
2. 模块 chunk 打到内存中，通过 socket 传递给前端服务
3. 若改变了全局状态，HMR 会失效，退化到 reload

拓展阅读

• Webpack HMR 原理解析 (opens new window)
• 搞懂webpack热更新原理 (opens new window)
• Webpack 热更新实现原理分析 (opens new window)
• 轻松理解webpack热更新原理 (opens new window)