Vite（法语意思是 “快”，发音为 /vit/，类似 veet）是一种全新的前端构建工具。你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。
今天尝试了使用 Vite 作为脚手架开发 React，无论是 dev server 启动，还是热重载，都十分迅速，可以说是将 Webpack 按在地上摩擦。
随着项目规模的增加，使用 Webpack 开发是一件十分痛苦的事情，每一次启动 dev server 都需要花上近 1 分钟时间，构建更是需要几分钟，甚至在极端情况下，会出现 Node 堆栈溢出的情况。这无疑是十分浪费时间的，而使用 Vite 开发项目，就可以减少等待时间，大大提升开发效率。
下面从一个简单的 Demo 来一起了解下 Vite。
项目实践
Vite 对 React 的支持已经比较完善，直接通过 Vite 的 create 命令即可参加一个 React TS 项目
yarn create @vitejs/app
开发
在没有额外依赖的情况下，Vite 启动 dev server 只需要不到 300ms
使用 Vite 开发 React 时，也同样支持热加载，代码修改效果能够实时生效，而且比 Webpack 更快。
构建
针对生产环境，Vite 使用了 Rollup 构建代码。默认情况下，Vite 会使用现代 JavaScript 模式构建生成 bundle 文件，仅适配支持原生 ESM 特性的浏览器：
-
Chrome >=61
-
Firefox >=60
-
Safari >=11
-
Edge >=16
针对不支持原生 ESM 特性的浏览器，我们可以使用 @vitejs/plugin-legacy 插件。
原理
Vite 基于浏览器原生 ESM 特性，利用浏览器去解析 imports，在服务器端按需编译返回。
浏览器 ESM
当声明一个 script 标签类型为 module 时，浏览器将对其内部的 import 引用发起 HTTP 请求获取模块内容。如下所述，浏览器将发起一个对 /a.js 的 HTTP 请求，获取到内容之后再执行
<script type="module">
import { a } from "./a.js";
</script>
劫持请求
Vite 劫持了这些请求，并在后端进行相应的处理（比如使用 Babel 编译 React JSX），然后再返回给浏览器。
由于浏览器只会对用到的模块发起 HTTP 请求，所以 Vite 没必要对项目里所有的文件先打包后返回，而是只编译浏览器发起 HTTP 请求的模块即可。
模块解析
根据请求信息，解析获取相关的包文件，并返回给前端。
总结
截止 2021 年 1 月底，Vite 已经来到了 2.0 Beta 版本，Vite 正在快速的迭代发展着，相信不久的将来，我们可以将 Vite 应用到生产环境中，为开发提速。
