Vite 4.0 发布！
2022 年 12 月 9 日 - 查看 Vite 5.0 公告
Vite 3 在五个月前发布。此后，每周 npm 下载量从 100 万次增加到 250 万次。生态系统也已经成熟，并且还在不断发展。在今年的 Jamstack Conf 调查中，社区的使用率从 14% 跃升至 32%，同时保持了 9.7 的高满意度评分。我们看到了 Astro 1.0、Nuxt 3 和其他由 Vite 驱动的框架的稳定版本，这些框架正在创新和协作：SvelteKit、Solid Start、Qwik City。 Storybook 宣布对 Vite 的一流支持，作为 Storybook 7.0 的主要功能之一。 Deno 现在支持 Vite。Vitest 的采用正在爆炸式增长，它很快将占 Vite npm 下载量的一半。 Nx 也在投资该生态系统，并且正式支持 Vite。
作为 Vite 和相关项目所经历的增长的展示，Vite 生态系统于 10 月 11 日在 ViteConf 2022 上聚集一堂。我们看到了主要 Web 框架和工具的代表讲述创新和协作的故事。具有象征意义的是，Rollup 团队选择了在同一天发布 Rollup 3。
今天，Vite 团队在我们的生态系统合作伙伴的帮助下，很高兴地宣布 Vite 4 的发布，它在构建时由 Rollup 3 提供支持。我们已经与生态系统合作，以确保这种新的主要版本的平稳升级路径。 Vite 现在正在使用 Rollup 3，这使我们能够简化 Vite 的内部资产处理，并进行了许多改进。在此处查看 Rollup 3 发行说明。
快速链接
其他语言的文档
如果您最近开始使用 Vite，我们建议阅读 为什么选择 Vite 指南 并查看 入门 和 功能指南。如果您想参与其中，欢迎在 GitHub 上贡献。 近 700 位贡献者 为 Vite 做出贡献。在 Twitter 和 Mastodon 上关注更新，或加入我们的 Discord 社区 与他人协作。
开始使用 Vite 4
使用 pnpm create vite 来搭建一个带有您首选框架的 Vite 项目，或者打开一个在线启动模板以使用 vite.new 来使用 Vite 4。
您还可以运行 pnpm create vite-extra 以访问来自其他框架和运行时的模板（Solid、Deno、SSR 和库启动器）。当您在 Others 选项下运行 create vite 时，也可以使用 create vite-extra 模板。
请注意，Vite 启动器模板旨在用作一个试验场，以使用不同的框架测试 Vite。构建下一个项目时，我们建议您联系每个框架推荐的启动器。某些框架现在也在 create vite 中重定向到它们的启动器（Vue 的 create-vue 和 Nuxt 3，以及 Svelte 的 SvelteKit）。
在开发期间使用 SWC 的新 React 插件
SWC 现在是 Babel 的成熟替代品，尤其是在 React 项目的上下文中。 SWC 的 React Fast Refresh 实现比 Babel 快得多，对于某些项目而言，它现在是更好的选择。从 Vite 4 开始，有两个插件可用于具有不同权衡的 React 项目。我们相信目前两种方法都值得支持，并且我们将在未来继续探索对这两个插件的改进。
@vitejs/plugin-react
@vitejs/plugin-react 是一个使用 esbuild 和 Babel 的插件，以小的包占用空间和能够使用 Babel 转换管道的灵活性来实现快速 HMR。
@vitejs/plugin-react-swc (新)
@vitejs/plugin-react-swc 是一个新的插件，它在构建期间使用 esbuild，但在开发期间用 SWC 替换 Babel。对于不需要非标准 React 扩展的大型项目，冷启动和热模块更换 (HMR) 可以显着加快。
浏览器兼容性
现代浏览器构建现在默认以 safari14 为目标，以实现更广泛的 ES2020 兼容性。这意味着现代构建现在可以使用 BigInt，并且不再转换空值合并运算符。如果您需要支持旧版浏览器，可以像往常一样添加 @vitejs/plugin-legacy。
将 CSS 作为字符串导入
在 Vite 3 中，导入 .css 文件的默认导出可能会导致 CSS 的双重加载。
import cssString from './global.css'可能会发生此双重加载，因为将发出一个 .css 文件，并且 CSS 字符串也可能被应用程序代码使用 - 例如，由框架运行时注入。从 Vite 4 开始，.css 默认导出已被弃用。在这种情况下，需要使用 ?inline 查询后缀修饰符，因为它不会发出导入的 .css 样式。
import stuff from './global.css?inline'在迁移指南中了解更多信息。
环境变量
Vite 现在使用 dotenv 16 和 dotenv-expand 9（以前是 dotenv 14 和 dotenv-expand 5）。如果您有一个包含 # 或 ` 的值，您将需要用引号将其括起来。
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"有关更多详细信息，请参见 dotenv 和 dotenv-expand changelog。
其他功能
- CLI 快捷方式（在开发期间按
h查看所有快捷方式）（#11228） - 预捆绑依赖项时支持 patch-package (#10286)
- 更简洁的构建日志输出 (#10895) 并切换到
kB以与浏览器开发人员工具对齐 (#10982) - 改进了 SSR 期间的错误消息 (#11156)
减少的包大小
Vite 关心其占用空间，以加快安装速度，尤其是在文档和复制的游乐场用例中。再一次，这个主要版本带来了 Vite 包大小的改进。与 vite 3.2.5 相比，Vite 4 的安装大小减少了 23%（14.1 MB 对 18.3 MB）。
Vite 核心的升级
Vite Core 和 vite-ecosystem-ci 继续发展，以为维护人员和协作者提供更好的体验，并确保 Vite 开发能够应对生态系统的增长。
核心之外的框架插件
@vitejs/plugin-vue 和 @vitejs/plugin-react 自 Vite 的第一个版本以来一直是 Vite 核心 monorepo 的一部分。当我们进行更改时，这有助于我们获得紧密的反馈循环，因为我们可以同时测试和发布 Core 和插件。使用 vite-ecosystem-ci，我们可以通过在独立的存储库上开发的这些插件获得此反馈，因此从 Vite 4 开始，它们已从 Vite 核心 monorepo 中移出。这对于 Vite 的框架无关故事很有意义，并将使我们能够建立独立的团队来维护每个插件。如果您有要报告的错误或要请求的功能，请继续在新存储库上创建问题：vitejs/vite-plugin-vue 和 vitejs/vite-plugin-react。
vite-ecosystem-ci 改进
vite-ecosystem-ci 通过提供对大多数主要下游项目的 CI 状态的按需状态报告来扩展 Vite 的 CI。我们每周针对 Vite 的 main 分支运行 vite-ecosystem-ci 三次，并在引入回归之前收到及时的报告。 Vite 4 将很快与大多数使用 Vite 的项目兼容，这些项目已经准备了具有所需更改的分支，并将在接下来的几天内发布它们。我们还能够在 PR 上按需运行 vite-ecosystem-ci，方法是在评论中使用 /ecosystem-ci run，这使我们能够在更改影响 main 之前知道更改的效果。
鸣谢
如果没有 Vite 贡献者（其中许多是下游项目和插件的维护者）以及 Vite 团队 的努力，Vite 4 将是不可能的。我们所有人共同努力，再次改进 Vite 的 DX，以用于每个使用它的框架和应用程序。我们很感激能够为这样一个充满活力的生态系统改进一个共同的基础。
我们还要感谢赞助 Vite 团队的个人和公司，以及直接投资于 Vite 未来的公司：@antfu7 在 Vite 和生态系统上的工作是他为 Nuxt Labs 工作的一部分，Astro 正在资助 @bluwyoo 的 Vite 核心工作，并且 StackBlitz 聘请 @patak_dev 全职从事 Vite 工作。
下一步
我们的当务之急是整理新打开的问题，以避免可能的回归造成的破坏。如果您想参与并帮助我们改进 Vite，我们建议从问题整理开始。加入我们的 Discord 并在 #contributing 频道上联系。完善我们的 #docs 故事，并 #help 他人。随着 Vite 的采用继续增长，我们需要继续为下一波用户建立一个有帮助和欢迎的社区。
有很多开放的领域可以不断改进每个选择 Vite 来为其框架提供动力并开发其应用程序的人的 DX。前进！