大家好,这里是大家的林语冰。一个月前尤雨溪在 ViteConf 大会上就透露了 Vite 一年来的成果、现状和未来规划,企图诉诸 Rust "锈化"重构 Rollup,今年年底 Vite 生态还会有大动作。
2023 年 11 月 16 日,Vite 团队官宣:Vite 5 正式发布!

免责声明
本文属于是语冰的直男翻译了属于是,仅供粉丝参考,英文原味版请临幸 Vite 5.0 is out! (vitejs.dev/blog/announ...%25E3%2580%2582 "https://vitejs.dev/blog/announcing-vite5.html)%E3%80%82")
Vite 4 (cn.vitejs.dev/blog/announ...) 大约在一年前官宣,它为前端生态积基树本。Vite 的 npm 周下载量从 2_500_000
暴涨至 7_500_000
,因为新兴项目不断构建于同一共享基建上。框架持续推陈出新,除了 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 等之外,我们还瞄到新兴框架的强势加入,使前端生态系统更加给力。RedwoodJS 和 Remix "切换赛道"到 Vite 为 React 生态系统的增量采用铺平了道路。Vitest 的增长速度甚至比 Vite 更青出于蓝。Vitest 团队一直在努力打工,且不日就会官宣 Vitest 1.0。当 Vite 与 Storybook、Nx 和 Playwright 等其他工具"梦幻联动"时,Vite 的故事还在继续,前端环境大抵相同,Vite 在 Deno 和 Bun 中都能奏效。
一个月前,我们举办了第二届 ViteConf 多人活动,由 StackBlitz 主办。与去年一样,前端生态中的大多数项目都聚众群聊、共享想法并互换微信,不断扩大共享空间。我们还看到新的拼图填充了元框架工具带,比如 Volar 和 Nitro。Rollup 团队同年同日官宣了 Rollup 4,这是 Lukas 去年开始的传统。
六个月前,Vite 4.3 (cn.vitejs.dev/blog/announ...) 官宣。此版本显著优化了开发服务器的性能。虽然但是,Vite 尚存一大坨的进步空间。在 ViteConf 大会上,Evan You(尤雨溪)官宣了 Vite 开发 Rolldown 的长期规划,Rolldown 是具有兼容性 API 的 Rust 移植版 Rollup。一旦 Rolldown 准备就绪,我们打算在 Vite Core 中使用它来承担 Rollup 和 esbuild 的任务。
这意味着构建性能的优化(以及之后的开发性能优化,因为我们将 Vite 本身的性能敏感地带迁移到 Rust),并大大地减少了开发和构建的不一致性。
Rolldown 目前处于早期阶段,团队正准备在年底前开源代码库。敬请关注!
今天,我们标记了 Vite 长征上的又一重要里程碑。Vite 团队、贡献者和生态系统合作伙伴十分鸡冻地官宣 Vite 5 正式发布。Vite 现在正在使用 Rollup 4,这已经代表了构建性能的大幅提升。此外,还有若干新选项可以提高开发服务器的性能配置文件。
Vite 5 聚焦于清理 API(腰斩已弃用的功能)并简化了若干功能,以解决长期存在的顽瘴痼疾,举个栗子,切换到 define
使用适当的 AST 替换而不是正则表达式。我们还将继续采取措施使 Vite 面向未来(现在要求 Node.js 18+,且 CJS Node API 已被弃用)。
速览列表:
- 文档 (cn.vitejs.dev)
- 迁移指南 (cn.vitejs.dev/guide/migra...)
- 升级日志 (github.com/vitejs/vite...)
如果您是 Vite 新玩家,我们建议您先阅读入门攻略 (cn.vitejs.dev/guide/) 和功能指南 (cn.vitejs.dev/guide/featu...%25E3%2580%2582 "https://cn.vitejs.dev/guide/features)%E3%80%82")
我们感谢 Vite Core 的 850 多位贡献者,以及帮助我们走到这一步的 Vite 插件、集成、工具和翻译的维护者和贡献者。我们鼓励您强势加入,并与我们一起继续改进 Vite。您可以在我们的贡献指南 (github.com/vitejs/vite...) 中了解更多信息。首先,我们建议对问题进行分类、审查 PR、基于开放的 issue 发送失败测试 PR,并在 Discussions 和 Vite Land 的帮助论坛中辅助其他人。在此过程中,您将学到一大坨东东,并顺利为项目做出进一步贡献。如果您有任何疑问,请加入我们的 Discord 社区,并在 #contributing 频道上打个招呼。
Vite 5 快速入门
通过 pnpm create vite
使用您喜欢的框架搭建 Vite 项目的脚手架,或者使用 vite.new
在线打开一个启动模板沉浸式体验 Vite 5。您还可以运行 pnpm create vite-extra
访问来自其他框架和运行时(Solid、Deno、SSR 和库启动器)的模板。当您在 Others
选项下运行 create vite
时,create vite-extra
模板也可用。
请注意,Vite 入门模板旨在用作使用不同框架测试 Vite 的游乐场。在构建下一个项目时,我们建议拥抱每个框架推荐的启动器(starter)。某些框架现在也重定向 create vite
到它们的启动器(create-vue
和 Vue 的Nuxt 3
,以及 Svelte 的 SvelteKit
)。
Node.js 支持
Vite 不再支持 Node.js 14/16/17/19,后者已达到其 EOL(生命终点)。Vite 现在要求 Node.js 18/20+。
性能
除了 Rollup 4 的构建性能优化之外,还有一个新指南可帮助您识别和修复常见的性能问题,请临幸 vitejs.dev/guide/perfo...
Vite 5 还引入了 server.warmup
,这是一个缩短启动时间的新功能。它允许您定义一个模块列表,这些模块应在服务器启动后立即进行预转换。每当使用 --open or server.open
时,Vite 也会自动预热 App 的入口点或要开启的 URL。
主要变更
- Vite 现在由 Rollup 4 驱动 (cn.vitejs.dev/guide/migra...)
- 弃用 CJS Node API (cn.vitejs.dev/guide/migra...)
- 重做
defined
和import.meta.env.*
替换策略 (cn.vitejs.dev/guide/migra...) - SSR 外部化模块值现在匹配生产环境 (cn.vitejs.dev/guide/migra...)
worker.plugins
现在是一个函数 (cn.vitejs.dev/guide/migra...)- 允许包含
.
的路径回退到 index.html (cn.vitejs.dev/guide/migra...) - 对齐开发和预览 HTML 服务的行为 (cn.vitejs.dev/guide/migra...)
- manifest 文件现在默认在
.vite
目录生成 (cn.vitejs.dev/guide/migra...) - CLI 快捷方式要求额外的
Enter
推动 (cn.vitejs.dev/guide/migra...) - 更新
experimentalDecorators
和useDefinedForClassFields
的 TS 行为 (cn.vitejs.dev/guide/migra...) - 移除
--https
flag 和https:true
(cn.vitejs.dev/guide/migra...) - 移除
resolvePackageEntry
和resolvePackageData
API (cn.vitejs.dev/guide/migra...) - 移除之前已弃用的 API (cn.vitejs.dev/guide/migra...)
- 阅读关于影响插件和工具作者的高级变更详情 (cn.vitejs.dev/guide/migra...)
迁移至 Vite 5
我们与前端生态的合作伙伴"梦幻联动",确保顺利迁移到此新版本。另外,vite-ecosystem-ci
对于帮助我们做出更大胆的改变,同时避免回归至关重要。我们很高兴看到其他生态系统采用同款方案来改善它们的项目与下游维护者之间的协作。
对于大多数项目来说,Vite 5 的更新应该无须多言。但我们建议在升级之前查看详细的迁移指南。
您可以在 Vite 5 更新日志中找到对 Vite Core 的完整更改列表的低级拆解。
鸣谢
Vite 5 是我们的贡献者、下游维护者、插件作者和 Vite 团队社区长期打工的成果。非常感谢 Bjorn Lu 领导了此版本的发布过程。
我们也感谢赞助 Vite 开发的个人和公司。StackBlitz、Nuxt Labs 和 Astro 通过聘请 Vite 团队成员继续投资 Vite。向 Vite 的 GitHub Sponsors、Vite 的 Open Collective 和 Evan You 的 GitHub Sponsors 的赞助商致敬。特别值得一提的是 Remix 成为金牌赞助商,并在切换到 Vite 后回馈社会。
关于尤雨溪 ViteConf 2023 最新的演讲视频,可以传送 B 站观看语冰直男翻译的中文版,仅供粉丝参考。 (www.bilibili.com/video/BV1u8...)

您现在收看的是前端翻译计划,学废了的小伙伴可以订阅此专栏合集,我们每天佛系投稿,欢迎持续关注前端生态。谢谢大家的点赞,掰掰~
