【前端工程化面试题】vite热更新原理

vite 在开发阶段，运行 vite 命令，会启动一个开发服务器，vite 在开发阶段是一个服务器

1. 依赖 esm： vite 在开发阶段使用 esm 作为开发时的模块系统。esm 具有动态导入的能力，这使得在代码中引入模块时可以动态地加载新的模块，从而实现了热更新。
2. HMR 机制：vite 利用了 webpack 等构件工具中常用的热模块替换机制，在代码发生变化时，只将修改的模块动态的注入到运行中的应用程序中，不需要刷新整个页面，从而实现热更新。
3. 使用 websocket 进行通信：vite 使用了 websocket 在开发服务器和浏览器之间建立了一个持久的双向通信通过。通过这个通道，vite 能够实时的将代码推送给浏览器，使浏览器可以及时的获取到代码变化，并进行热更新。
   1. 开发服务器创建 websocket 并监听文件变化，并给客户端发送消息
   2. 客户端有一个 js 文件(/@vite/client)也创建 websocket ，用来接收开发服务器的消息，这个 js 文件，在项目启动阶段，会注入到入口文件 index.html 中，从而实现模块的热更新。
4. 开发服务器：vite 提供了一个基于 koa 的开发服务器，这个服务器会监控系统中文件的变化，并在文件发生变化时触发重新构建和热更新。通过这个开发服务器，开发者可以在开发过程中实时地查看代码的变化效果。

综上所述，Vite 的热更新主要依赖于 ES Module 的动态导入特性、模块热替换机制、WebSocket 通信以及开发服务器等技术手段，通过这些技术手段的结合，Vite 能够实现快速、实时地将代码变化推送到浏览器端，从而实现了高效的热更新功能。