1、什么是Vite？
Vue作者尤玉溪开发的web开发工具，Vite(发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。由两部分组成：一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源。
2、安装
Vite 需要 Node.js 版本 >= 12.0.0，$ npm install vite
demo项目地址：vue2+ts+templete
3、Vite支持的功能
- 热模块加载：Vite 提供了一套原生 ESM 的 HMR API，框架利用 API 可以 提供及时、准确更新、无需加载页面或清楚文件状态，注意哈：这些都是内置在 Vite中，无需配置
- 对 Css 的支持：Vite可以直接处理 .css 文件 也拥有 HMR
- 对 css 预处理器： 不需要安装特定的插件，但是需要安装相关依赖
# .scss and .sass
npm install -D sass
# .less
npm install -D less
# .styl and .stylus
npm install -D stylus
- 对.ts的支持: 支持.ts的文件
等等
4、如何快速使用
npx create-vite-app <project-name> / yarn create-vite-app <project-name>
cd <project-name>
npm install (or 'yarn')
npm run dev (or 'yarn dev')
5、背后的原理
（1）Vite是如何去掉打包的：打包是开发者利用打包工具将应用的各个模块形成bundle，以一定规则读取模块的代码（方便在不支持模块化的浏览器里使用），比如webpack使用map存放模块的id和路径，使用_webpack_require_方法获取模块的导出。
Vite是利用的浏览器原生支持模块化导出的特性，省略了对模块的组装，也不需要生成bundle，所以省略了打包这一步。
（2）Vite是如何实现按需加载的：webpak之类的打包工具会把各个模块提前打包到bundle里，但打包的过程不是静态的（不管某个模块的代码有没有被执行到，这个模块都会被打包进去，坏处就是随着项目越来越大，bundle也会越来越大）。
开发者为了减少bundle的大小，会使用动态引入（import）等方式异步加载模块，然而在Vite中可以在某个模块的时候动态引入他，不需要提前打包，虽然这个只能用在开发环境，但也快了很多。
更多使用方法介绍，参考：官网地址：vitejs.cn/guide/#scaf…
