【前端工程化面试题】简单说一下 vite 的构建流程

首先需要知道 vite 的原理，请参考这篇文章。

vite 的构建流程一般是指的开发过程中的流程：

1. 启动开发服务器：运行 vite 命令，启动开发服务器，在开发期间 vite 是一个服务器
2. 解析入口模块：在开发阶段 vite 的入口文件通常是 index.html，vite 会分析入口模块的依赖关系，并将其作为构建的起点
3. 按需编译：vite 的模块都是动态引入的，vite 利用了浏览器支持 esm 的这个特性，在浏览器需要请求某个模块的时候才会进行编译，将源码编译成对应的 esm 发送给浏览器。
   1. 对于一些 js 的依赖使用 esbuild 转换成 esm
   2. 对于源码，vue 等文件，使用 @vue/compiler-sfc 解析编译成 js 代码，也是以 esm 的形式发送给浏览器
4. 使用 esm 原生模块：vite 编译后的结果是 esm 模块，而不是打包后的独立的文件，这样浏览器可以直接使用 esm，提高运行效率
5. 处理静态资源：vite 内置了对图片，css等资源处理的功能，原生支持使用 scss等 css预处理日，可以在内部把资源进行处理，然后供浏览器使用
6. 热模块替换：vite 支持热更新功能，在开发过程中只针对编辑了的文件进行更新，而不需要整个页面重新构建，内部的原理是使用了 websocket机制。