热门更新的完整英文名称缩写为HRM。当修改代码时，HRM可以替换更改页面中页面的模块而不会刷新页面而不会影响其他模块的正常操作
本文将讲述热门更新的每个过程。什么是主要角色，以及如何将这些过程串起。目的是帮助每个人对热门更新过程有基本的了解。
由于空间，本文在每个过程的详细信息中都不会深入研究。
本文中使用的代码放置在GitHub中。其中有两个项目，一个是一个纯TS热更新项目，另一个是一个普通的VUE项目
在介绍热门更新的主要过程之前，让我们先看看这个问题
将大象放入冰箱中需要多少步骤？
我相信每个人都对这个问题非常熟悉，只有三个步骤：
这个问题本身不是对人类逻辑的测试，而是测试抽象解决方案的关键步骤的能力
热更新过程非常大且复杂。我们必须简化复杂的问题，只注意核心过程，抽象次要问题，以便理解整个热更新过程
在这个问题中，核心过程是这三个步骤，然后我们可以进一步完善需要注意的步骤。其他步骤可以暂时忽略
既然您只关心核心过程，那么您会想到什么核心流程？
从修改代码到接口更新发生了什么？
这是我与朋友分享时建议的：
实际上，这是多少个过程
以下是我绘制的热更新主过程的定时图。一开始每个人都可能不了解。这并不重要。它将一一详细介绍。
VITE服务器：指在开发过程中由Vite启动的服务器
Vite客户端：Vite Dev服务器将在注入路径的脚本中。此脚本在浏览器中运行
暂时记住这个核心过程：
让我们从与我们最亲密的浏览器端开始
本节主要讨论这两个部分：
这里有两个API：
这两个API定义了如何在拉动新代码后退出旧代码以及新代码的更新
让我们看一下修改热更新API的代码时会发生什么？
与本节相对应的项目是 /package /ts-file测试。相应的文件是No-Hrm.ts
下图主要是一个TS文件，该文件直接获取DOM并替换其InnerHTML
我们可以看到该文件没有定义热门更新。修改文件后，整个页面都会刷新。由于Vite不知道如何进行热门更新，因此只能刷新页面
与本节相对应的项目是 /package /ts-file测试。相应的文件为access.ts
API用于传递回调函数以定义模块修改，如何加热以更新
当我们修改文件（将更改为）时，将执行注册的旧模块的恢复
mod是修改的模块对象。在此文件中，mod是导出渲染函数的对象
修改模块后，重新执行渲染函数并设置InnerHTML更新接口。
目前，我们定义了如何进行热门更新，Vite不会刷新页面（刷新页面将清除所有请求，并且以下图片中没有请求）
处置类似于热，但处置定义了模块的出口，以及如何更新新模块
旧模块何时需要退出？
如果您的页面具有计时器，则需要在旧模块退出时删除计时器。否则，将添加每个修改，并且页面上将有一个新的计时器。
处置主要用于进行一些模块退出工作
编写热门更新非常麻烦。没有人应该在业务中写作？
热更新代码确实很麻烦，基本上没有人在业务中，但是当我们编写VUE代码时，确实会有热门更新。
这是因为vite插头 - 添加了vue热更新代码时，在编译模块时。
Vite本身仅提供热更新API，不提供特定的热更新逻辑，特定的热更新行为，由VUE和React框架提供
本节主要讨论这部分
什么是热更新边界？角色是什么？
假设有两个文件，关系如下
从上一节中，我们可以知道Vue具有加热更新逻辑，而我们编写的TS文件没有热更新逻辑
当修改它时，该页面目前会刷新吗？
答案不是。VUE组件所依赖的TS文件已修改，可以将其更新到此VUE文件并重新加载组件。如果您刷新页面，则开发体验不好。
目前，它被称为热更新边界 - 最近可接受的热更新模块
沿依赖树，找到可以更新的最新模块，即热门更新绑定
为什么有时可以修改代码热更新，但有时它会刷新页面？例如，vue project中的main.ts。
在修改过程中，由于无法找到可以更新的模块，Vite不知道如何进行热门更新，因此它只能刷新页面
如果可以找到其他TS文件，则可以直接执行热门更新。
文件是否对应于模块？我为什么需要与文件相对应的模块？
在VITE中，该文件与模块一一不对应
因为Vite可以加入查询参数，因此您可以查看Vite文档[更改要介绍的资源的方法]
同一文件可以用作多个模块。例如，在RAW期间编译和输出的模块在工作时磨损时编译的模块是两个不同的模块
因为一个文件对应于多个模块。这些模块需要找到其热续订边界并执行热门更新
本节主要讨论这部分
Websocket创建了什么？
Vite Dev Server将在脚本中注入路径。访问时，将拉动脚本
加载时，client.ts将创建WebSocket并监视消息事件
Herslemessage负责处理各种信号。由于空间有限，我们不会扩展细节
我们可以通过捕获袋子看到Vite Dev服务器和客户端之间的通信
本节主要讨论这部分
模块代码转换的核心Vite足以打开一个大主题来谈论。同样，本文只会引入大概。您只需要知道Vite将被转换。
如前所述，vite插头注射热更新代码到该模块中，该代码在编译转换模块的过程中进行了处理
从数字可以看出，在编译后，内容是JS代码，也可以看到
在定时图中，有一个圆形条件，直到动态导入的模块没有模块依赖性为止。这是什么意思？
如果有以下两个文件：
救济（进口）
修改时，将执行以下步骤：
由于热更新边框的模块可能取决于导入，因此有其他模块。这些模块需要导入拉动，直到动态导入的模块没有模块依赖性的模块依赖项
原始：https：//juejin.cn/post/7096103959563075597