JavaScript 本身不支持热更新，需依赖构建工具（如 Webpack、Vite）和运行时机制实现；其核心是拦截模块加载、动态替换模块，并由开发者显式管理状态迁移与副作用清理。
JavaScript 本身不支持热更新（Hot Module Replacement, HMR），但通过构建工具（如 Webpack、Vite）和运行时机制，可以在不刷新页面的前提下替换、添加或删除模块，实现“热更新”效果。核心不是语言特性，而是工程化方案对模块加载流程的拦截与重载。
热更新依赖模块系统的可控制性
原生 JavaScript 的 import 是静态且不可变的，一旦执行就无法卸载或替换。热更新的前提是：模块必须能被动态加载、卸载，并允许新旧版本共存过渡。因此主流方案都基于以下设计：
- 使用自定义模块加载器（如 Webpack 的
__webpack_require__）替代原生 import - 每个模块导出时被包装成“可接受更新”的形式（例如暴露
hot.accept接口） - 构建工具在文件变化时生成差异模块（diff chunk），并推送到浏览器
HMR 的基本工作流程
以 Webpack 为例，热更新不是简单地重新执行模块代码，而是一套协同机制：
- 开发服务器监听源码变更，编译出仅包含改动内容的 HMR 更新包（JSON + JS）
- 客户端（浏览器）通过 WebSocket 收到通知，下载新模块代码
- 运行时调用模块的
module.hot.dispose()清理副作用（如事件监听、定时器） - 再调用
module.hot.accept()加载新模块，并触发用户定义的更新逻辑（如 React 组件重渲染）
关键点在于：HMR 不会自动更新状态，需要开发者显式声明如何“安全地切换”模块——比如 React 需要 react-refresh 插件来保存组件状态；Vue 单文件组件则由 vue-loader 注入 HMR 逻辑。
立即学习“Java免费学习笔记（深入）”；
Vite 的轻量级 HMR 实现差异
Vite 利用浏览器原生 ESM，跳过打包环节，让 HMR 更快更直接：
- 文件修改后，服务端返回一个只含变更模块的响应（
importURL 不变，但内容已更新） - 客户端通过
import.meta.hotAPI 主动invalidate()当前模块，触发重新import() - 旧模块的副作用需手动清理（
hot.dispose），新模块初始化逻辑写在hot.accept回调中
相比 Webpack，Vite 的 HMR 更贴近 ESM 语义，没有运行时模块系统开销，但对模块生命周期管理的要求更明确。
为什么不能直接靠 JS 语法实现热更新
因为 JavaScript 引擎不提供模块卸载接口：import 是单向绑定，export 值被引用后无法撤回；闭包、全局变量、DOM 绑定等状态天然难以自动迁移。热更新本质是“人工约定 + 工具辅助”的状态接管过程：
- 你不能指望引擎自动把旧函数里的
this.state搬到新函数里 - 必须靠框架（React/Vue）或业务代码显式保存/恢复状态
- 模块热替换只是替换了函数定义或类声明，其余一切靠你自己兜底
所以所谓“原理”，其实是构建工具 + 运行时钩子 + 框架适配三者协作的结果，而非 JS 语言能力。
