Vite 的原理

Question

Vite 的原理是利用 ES modules 和浏览器原生的 import/export 功能，在开发模式下通过轻量级的服务器实现快速的模块热更新。在生产模式下，Vite 利用 Rollup 进行代码分割和优化，生成最终的静态资源文件。

esbuild 预构建是指在构建过程中，先对源代码进行一次轻量级的转换和优化，以减少构建时间。esbuild 是一个非常快速的 JavaScript/TypeScript 编译器，可以将源代码转换为高度优化的 JavaScript 代码，并且支持 Tree Shaking、代码压缩、多线程并行构建等特性。通过使用 esbuild 预构建，可以显著缩短构建时间，提高开发效率。

Vite 的基本实现原理，就是启动一个 koa 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一定的处理最终以 ESM的格式返回给客户端

Vite 的热加载原理，其实就是在客户端与服务端建立了一个 websocket 连接，当代码被修改时，服务端发送消息通知客户端去请求修改模块的代码，完成热更新。