跳到主要内容

HMR热更新

HMR 全称 Hot Module Replacement，可以翻译为「模块热更新」，它能够在保持页面状态不变的情况下动态替换、删除、添加代码模块

在 HMR 之前，应用的加载、更新都是一种页面级别的原子操作，即使只是单个代码文件发生变更，都需要刷新整个页面，才能将最新代码映射到浏览器上，这会丢失之前在页面执行过的所有交互与状态，例如：

  • 对于复杂表单场景，这意味着你可能需要重新填充非常多字段信息；
  • 弹框消失，你必须重新执行交互动作才会重新弹出。

再小的改动，例如更新字体大小，改变备注信息都会需要整个页面重新加载执行，整体开发效率偏低。而引入 HMR 后，虽然无法覆盖所有场景，但大多数小改动都可以通过模块热替换方式更新到页面上，从而确保连续、顺畅的开发调试体验，极大提升开发效率。

开启热更新​

  • 设置 devServer.hot 属性为 true

HMR插件【热更新】原理​

  • HMR（Hot Module Replacement）插件

HMR插件的工作原理如下：

  1. 在应用程序运行时，HMR插件会与Webpack服务器进行通信。
  2. 当某个模块发生变化时，Webpack服务器会通知客户端更新该模块。
  3. 客户端接收到更新通知后，会替换相应的模块并重新渲染页面。

这里的webpack服务器是基于node的开发服务器

webpack-dev-server插件来启动Webpack服务器

HMR如何动态替换页面代码​

  • Webpack的热更新功能主要依靠HMR（Hot Module Replacement）插件实现
  • HMR插件会监听应用程序中模块的变化，并在模块更新时动态替换它们

具体来说，HMR插件会在应用程序运行时与Webpack服务器进行通信。当某个模块发生变化时，Webpack服务器会通知客户端进行更新，客户端接收到更新通知后，会替换相应的模块并重新渲染页面