一、什么是Vite ？
vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
二、创建一个vite 项目
第一步 创建命令 npm init vite-app (project 项目名) | yarn create vite-app (project 项目名)
第二步 切换到目录 cd project
第三步 安装依赖包 npm install | yarn
第四步 启动项目 npm run dev | yarn dev
三、vite项目使用TypeScript
vite原生支持ts，使用方式非常简单直接把script 的lang 换成ts即可，如果开发环境我们查看浏览器中的请求，会发现请求的依然是ts的代码
注意：在vite2中，已经不再使用Koa了，而是使用Connect来搭建的服务器
四、vite项目使用css
- vite可以直接支持css的处理
- vite项目使用less sass scss，只需要下载各自的loader和依赖即可
- vite处理postcss，只需要安装postcss，并且配置 postcss.config.js 的配置文件即可npm install postcss postcss-preset-env -D
五、vite打包和预览
本地局部安装可以直接运行npx vite build
六、vite打包快的原因
因为vite是基于ESBuild，所以速度快，且对ESBuild生态支撑好
1.什么是ESBuild?
ESbuild 是一个类似webpack构建工具。它的构建速度是 webpack 的几十倍。
2.ESBuild为什么这么快?
- 使用GO语言编写的, 可以直接转换成机器代码, 而无需经过字节码;
- ESBuild可以充分利用CPU的多内核，尽可能让它们饱和运行；
- ESBuild的所有内容都是从零开始编写的，而不是使用第三方，所以从一开始就可以考虑各种性能问题;
3.ESBuild的特点
注意: 在当前前端环境中，直接使用 esbuild 代理 webpack 是不现实的。在目前的主流方案是在 webpack 中使用 esbuild 去做一些代码的 transform (代替 babel-loader)。或者使用 vite
七、vite原理
- vite1: 使用的是 koa
- vite2: 使用的是 Connext; Connext更加是做一个转发功能
