是什么
Next generation frontend tooling. It's fast!
Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
浏览器支持
默认的构建目标是能支持 原生 ESM 语法的 script 标签、原生 ESM 动态导入 和 import.meta 的浏览器。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持
编辑切换为居中
添加图片注释，不超过 140 字（可选）
解决的需求（问题）
webpack 构建的问题：
- 启动慢
- 热更新慢
怎么用
yarn create vite
yarn dev
为什么快
1、Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。
Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
2、在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活[1]（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。
3、Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。
好了，以上都是官方文档自己写的，我们去看下 vite 的源代码，一探究竟。
扩展阅读
- vite-ssg - 服务器端生成。
- vitedge - 使用全栈实用程序进行边缘渲染。
- vite-react-tailwind-template -React 17、TypeScript、Jest、ESLint、Prettier、Husky、Tailwind CSS、PostCSS、pnpm.
- awesome-vite
- Vite Rollup 插件
- umi + vite:umijs.org/docs/api/co…
