一、Vite 简介
官方中文网站：Vite | 下一代的前端工具链
官方定义：
Vite，下一代的前端工具链，为开发提供极速响应。
Vue3.4版本，Vue新版本使用Vite构建、开发、调试、编译。
Vite的优势
极速的服务启动
使用原生 ESM 文件，无需打包!
轻量快速的热重载
无论应用程序大小如何，都始终极快的模块热替换（HMR）
丰富的功能
对 TypeScript、JSX、CSS 等支持开箱即用。
优化的构建
可选 "多页应用" 或 "库" 模式的预配置 Rollup 构建
通用的插件
在开发和构建之间共享 Rollup-superset 插件接口。
完全类型化的API
灵活的 API 和完整的 TypeScript 类型。
二、前端程序员定义
Vite是一种新型的前端构建工具，它能显著改善前端开发体验。
Vite由两个主要部分组成：
dev server：利用浏览器的ESM能力来提供源文件，具有丰富的内置功能并具有高效的HMR
生产构建：生产环境利用Rollup来构建代码，提供指令用来优化构建过程
Vite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。
三、Vite的主要特性
Instant Server Start ------ 即时服务启动
Lightning Fast HMR ------ 闪电般快速的热更新
Rich Features ------ 丰富的功能
Optimized Build ------ 经过优化的构建
Universal Plugin Interface ------ 通用的Plugin接口
Fully Typed APIs ------ 类型齐全的API
四、为什么要使用Vite
开发环境⚡️速度的提升
我们详细对比了开发环境中的Vite和Webpack，发现主要有如下不同：
| Webpack | Vite |
|---|---|
| 先打包生成bundle，再启动开发服务器 | 先启动开发服务器，利用新一代浏览器的ESM能力，无需打包，直接请求所需模块并实时编译 |
| HMR时需要把改动模块及相关依赖全部编译 | HMR时只需让浏览器重新请求该模块，同时利用浏览器的缓存（源码模块协商缓存，依赖模块强缓存）来优化请求 |
| 内存高效利用 | - |
因此，针对开发环境中的启动慢问题，Vite开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，启动时还会使用esbuild来进行预构建。而Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。
更多：