围绕 Vite 的前端统一工具链-尤雨溪.pdf

1、围绕围绕 Vite 的前端的前端统统一工具一工具链链尤雨溪D2 2025Vite 的一点历史2020 年作为实验性质的原型开始开发一开始只是为了 Vue 的用例设计2021 年 Vite 2.0 转型成通用构建工具2022 年开始被新兴框架广泛采用为底层构建工具Nuxt 3,SvelteKit,Astro,SolidStart2023:React 元框架也开始迁移到 Vite:Redwood,Remix2024:更多基于 Vite 的方案：TanStack Start,One,Ember2025:create-react-app 被官方废弃后的事实继承者Vite 的现状npm 周下周下载载量量

2、 2200+万次万次Feb 202411.7M/weekFeb 202522.1M/weekFeb 20233.4M/week和和 Next.js 下下载载量的比量的比较较State of JS 2024 开开发发者者问问卷卷调查调查No.1 增长(+30%)No.2 满意度(98%)No.3 感兴趣程度全类别最受欢迎的库/工具https:/ 增长(+26%)No.1 满意度(98%)No.2 感兴趣程度ViteVitest庞庞大，活大，活跃跃，多元化的生，多元化的生态态在生在生产环产环境中使用境中使用 Vite 或基于或基于 Vite 的框架的公司的框架的公司.and many moreVi

3、te 已已经经成成为为了了下一代下一代 web 应应用的用的共享基建共享基建层层但，但，Vite 还还并不完美。并不完美。Vite 底底层层依然依依然依赖赖多个多个职责职责重复的第三方工具重复的第三方工具Vite原生原生 ESM dev server/HMR应应用支持用支持框架支持框架支持esbuild依依赖预赖预打包打包TS/JSX 转译转译压缩压缩Rollup插件生插件生态态生生产环产环境构建境构建拆包拆包/产产物物优优化化SWCReact HMR 转译转译压缩压缩GoJS/TSRust产物控制太弱（尤其是拆包）插件系统局限性大没有 HMR，也不支持 React fast refresh

4、转译Rollup插件生插件生态态生生产环产环境构建境构建拆包拆包/产产物物优优化化SWCReact HMR 转译转译压缩压缩esbuild依依赖预赖预打包打包TS/JSX 转译转译压缩压缩Vite原生原生 ESM dev server/HMR应应用支持用支持框架支持框架支持比起原生语言写的 bundler 来说太慢了Rollup插件生插件生态态生生产环产环境构建境构建拆包拆包/产产物物优优化化SWCReact HMR 转译转译压缩压缩esbuild依依赖预赖预打包打包TS/JSX 转译转译压缩压缩ViteNative ESM dev server/HMRApplication supportF

5、ramework supportBinary 太重Bundler 不可用Rollup插件生插件生态态生生产环产环境构建境构建拆包拆包/产产物物优优化化SWCReact HMR 转译转译压缩压缩esbuild依依赖预赖预打包打包TS/JSX 转译转译压缩压缩ViteNative ESM dev server/HMRApplication supportFramework support打包行为的微妙不一致(主要是 ESM/CJS interop 的处理)Rollup插件生插件生态态生生产环产环境构建境构建拆包拆包/产产物物优优化化SWCReact HMR 转译转译压缩压缩esbuild依依赖预赖

6、预打包打包TS/JSX 转译转译压缩压缩ViteNative ESM dev server/HMRApplication supportFramework support效率问题多次重复 parse/transform/codegen且在 js/native 之间传递字符串Rollup插件生插件生态态生生产环产环境构建境构建拆包拆包/产产物物优优化化SWCReact HMR 转译转译压缩压缩esbuild依依赖预赖预打包打包TS/JSX 转译转译压缩压缩ViteNative ESM dev server/HMRApplication supportFramework supportRollup