Vite简介（官网）
Vite是一种新型的前端构建工具，它能显著改善前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
Vite的主要特性
- 极速的服务启动：使用原生 ESM 文件，无需打包!
- 轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热重载（HMR）
- 丰富的功能：对TypeScript、JSX、CSS 等支持开箱即用。
- 优化的构建：可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
- 通用的插件：在开发和构建之间共享 Rollup-superset 插件接口。
- 完全类型化的API：灵活的 API 和完整 TypeScript 类型。
Vite原理
- 随着前端的发展，ES6出现后，紧接着出现了ESM。ESM是浏览器支持的一种模块化方案，允许在浏览器实现模块化。ESM的对外接口只是一种静态定义，为编译时加载，遇到模块加载命令import，就会生成一个只读引用。等脚本真正执行时，再根据这个只读引用，到被加载的那个模块内取值。由于ESM编译时就能确定模块的依赖关系，因此能够只包含要运行的代码，可以显著减少文件体积，降低浏览器压力。虽然EMS是一个比较新的模块化方案，但是新一代的浏览器中绝大部分都已经提供了支持。另外Vite 对 js/ts 的处理没有使用如 glup, rollup 等传统打包工具，而是使用了 esbuild。esbuild 是一个全新的js打包工具，底层使用了go，大量使用了并行操作，可以充分利用CPU资源。esbuild支持如babel, 压缩等的功能。并且esbuild的打包性能出众，官方给出的数据是：esbuild比rollup等工具快十几倍。
- Vite 的基本实现原理，就是启动一个 koa 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一定的处理最终以 ESM的格式返回给客户端。
并且vite在打包的时候开始就将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。依赖 大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块，以提高后续页面加载性能。Vite使用esbuild在初次启动开发服务器前把检测到的依赖进行预构建。Vite 基于ESM，在使用某些模块时，由于模块依赖了另一些模块，依赖的模块又基于另一些模块。会出现页面初始化时一次发送数百个模块请求的情况。
- Vite 的热加载原理，其实就是在客户端与服务端建立了一个 websocket 连接，当代码被修改时，服务端发送消息通知客户端去请求修改模块的代码，完成热更新。
Vite的缺点
— 目前 Vite 还是使用的 es module 模块不能直接使用生产环境（兼容性问题）
— 生产环境使用 rollup 打包会造成开发环境与生产环境的不一致。
— 很多 第三方 sdk 没有产出 ems 格式的的代码，这个需要自己去做一些兼容
