为什么选择 Vite

如果你还不知道什么是 Vite 的话点击 这里，快速了解。

极速的启动

Vite 非常非常快，对比 Webpack(Vue-cli)： 同等量代码（vue3 项目 15个组件、4个页面），不同构建工具执行的 dev 和 build 操作时长如下

项目	dev 启动时长	dev 页面加载	build 时长
vite	4834ms	537ms	7.26s
vue-cli	387ms	580ms	4.26s

Vite 和 Webpack 两者的 dev 命令运行耗时相差十几倍，理论上来说，项目越大性能差距越大。其中最大的原因是 Vite 在开发模式下并没有做太多打包操作。

Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。

而 Vite 以原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

基于打包器的开发服务器

基于 ESM 的开发服务器

快速的热重载

同样也是模式的问题，热更新的时候，Vite 只需要立即编译当前所修改的文件即可，所以响应速度非常快。

而 Webpack 修改某个文件过后，会自动以这个文件为入口重写 build 一次，所有的涉及到的依赖也都会被加载一遍，所以反应速度会慢很多。

对于 TypeScript 支持

Vite 支持开箱即用地引入 .ts 文件。

Vite 使用 esbuild 将 TypeScript 翻译到 JavaScript，约是 tsc 速度的 20~30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms。