Vite是一个基于ESM的构建工具，它的热更新原理是通过WebSocket实现的。在开发过程中，我们经常需要修改代码，然后重新编译，这个过程非常耗时，而且会中断我们的开发节奏。Vite的热更新原理可以让我们在修改代码后，无需重新编译，就可以立即看到修改后的效果，从而提高开发效率。
Vite的热更新原理是基于浏览器的WebSocket协议实现的。WebSocket是一种全双工通信协议，它可以在浏览器和服务器之间建立一个持久的连接，实现实时通信。在Vite中，当我们修改了代码后，Vite会通过WebSocket将修改的代码发送给浏览器，然后浏览器会立即更新页面，从而实现热更新。
具体来说，Vite的热更新原理分为两个部分：服务器端和客户端。服务器端负责监听文件变化，客户端负责接收文件变化并更新页面。
Vite 热更新的主要流程
热更新的英文全称为Hot Module Replacement，简写为 HMR。当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。
vite server：指 vite 在开发时启动的 server
• vite client：vite dev server 会在index.html中，注入路径为@vite/client的脚本，这个脚本是运行在浏览器的
1. 修改代码，vite server 监听到代码被修改
2. vite 计算出热更新的边界（即受到影响，需要进行更新的模块）
3. vite server 通过 websocket 告诉 vite client 需要进行热更新
4. 浏览器拉取修改后的模块
5. 执行热更新的代码
