vite插件，热更新

书接上回，上回我们讲到-赛博坦上起狼烟，黛玉七擒威震天！

话说这赛博坦世界，本非金雕玉砌只邦，原是铁骨钢胎所在。那乾坤之间，不见日月轮转，唯有能量潮汐起落，紫霞青焰交织成昼夜....

偏题了不好意思，脱口相声下次再说，下面我们一起来看看vite的热更新，插件的内容

HMR

曾经我面试过一个候选人，我问HMR是什么，他说不知道。我又问热更新是什么，他说是热更新...

emmm，以上为真实场景，没有半点虚构，HMR，全名叫做Hot Module Replacement，顾名思义，热模块替换，也叫做热更新。

它有什么作用呢？ 写了代码，按下保存按键之后，不需要刷新页面就能看到改变，乃至于滚动条，表单状态都不会改变和丢失，现代前端框架几乎都已经实现了hmr的开发阶段功能。

核心原理

Websocket链接

众所周知，启动vite时，会启动一个服务器，浏览器上预览我们的页面时，实际上是请求了这个服务，他们之间会建立一个长链接的关系。vite监听到文件的变化后，会推送一个消息给 浏览器，浏览器就知道这个位置改变了，重新渲染一下。

模块依赖图

上文说过，vite会维护一张模块之间的依赖图谱(Module Graph)，用于记录模块之间的引用关系，当某个模块变化后，顺着依赖图一直找，找到所有受影响的部分，就能实现精准的定位。

::: important hmr怎么处理文件变化？ 首先确定vite hmr查找文件的顺序： 入口文件 main.ts -> App.vue(会产生边界) -> Xxx.vue(边界) -> xxx.tx(没有边界) ok，那边边界是什么？： 边界 就是 ‘声明了 import.meta.hot.accept()’的模块。 vue文件因为 @vitejs/plugin-vue 注入了accept代码 tsx/jsx文件 @vitejs/plugin-react 注入了accept代码 普通ts文件，没有任何注入。 :::

当一处代码被改变时会发生什么呢？这里以vue为例，react其实也是同理：
比如 detail.vue 改变了任何代码，vite就会从它开始向依赖图谱查找，发现它本身就是存在边界的(实现了hot.accept())的，那么查找到自己就结束了， 所以通知浏览器，更新detail.vue

如果是一个 ts文件，比如 date.ts里面的方法被修改了，vite检测到变化，首先也会向上找，对于每一个导入它的分支路径，都向上查找到存在边界或者直通入口的位置结束。