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 和库启动器）的模板。当您在 create vite 中选择 Others 选项时，也可以使用 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 的插件，它在实现快速 HMR 的同时，保持了较小的包体积，并具备使用 Babel 转换流水线的灵活性。
@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 更新日志。
其他功能
- CLI 快捷键（开发时按
h可查看所有快捷键）(#11228) - 预构建依赖项时支持
patch-package(#10286) - 更简洁的构建日志输出 (#10895)，并切换到
kB以与浏览器开发工具对齐 (#10982) - 改进了 SSR 期间的错误消息 (#11156)
减小包体积
Vite 非常关注其安装体积，以加快安装速度，特别是在文档演示和重现案例中。这个大版本再次减小了 Vite 的包体积。Vite 4 的安装体积比 vite 3.2.5 小 23%（14.1 MB vs 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 的框架无关性而言意义重大，并将使我们能够建立独立的团队来维护每个插件。如果您有 Bug 要报告或有功能需求，请在未来的新仓库中创建 Issue：vitejs/vite-plugin-vue 和 vitejs/vite-plugin-react。
vite-ecosystem-ci 的改进
vite-ecosystem-ci 通过提供大多数主要下游项目 CI 状态的按需报告，扩展了 Vite 的 CI 能力。我们每周运行三次 vite-ecosystem-ci 来对比 Vite 的主分支，并在引入回归之前及时收到报告。Vite 4 将很快与大多数使用 Vite 的项目兼容，这些项目已经准备好包含必要更改的分支，并将于未来几天内发布。我们还能够通过评论中的 /ecosystem-ci run 在 PR 上按需运行 vite-ecosystem-ci，让我们在代码合并到主分支之前就能知道更改的影响。
鸣谢
没有 Vite 贡献者们无数个小时的工作，Vite 4 是不可能实现的。他们中的许多人是下游项目和插件的维护者，再加上 Vite 团队的努力。我们所有人齐心协力，再次提升了 Vite 的开发体验，服务于每一个使用它的框架和应用。我们很荣幸能为一个如此充满活力的生态系统改进共同的基础。
我们同样感谢赞助 Vite 团队的个人和公司，以及直接投资 Vite 未来的公司：@antfu7 在 Vite 和生态系统上的工作是他 Nuxt Labs 工作的一部分；Astro 正在资助 @bluwyoo 的 Vite 核心工作；StackBlitz 聘请了 @patak_dev 全职从事 Vite 的开发。
后续步骤
我们的首要任务是分类新提交的 Issue，以避免可能出现的回归带来的困扰。如果您想参与其中并帮助我们改进 Vite，我们建议从 Issue 分类开始。加入我们的 Discord 并在 #contributing 频道联系我们。完善我们的 #docs，并帮助 #help 其他人。随着 Vite 采用率的持续增长，我们需要继续为下一波用户建立一个乐于助人且友好的社区。
还有很多前沿工作需要去做，以不断提升那些选择 Vite 来驱动框架和开发应用的用户的开发体验。前行！