Vite 3 来了！新增功能 + 如何迁移

自首次发布以来，Vite.js 在开发者社区中的受欢迎程度大幅提升。每周 npm 下载量超过 100 万次，并且在 2021 年 JS 状态调查的库列表中名列前茅，随着越来越多的框架现在采用 Vite 作为其默认工具选项 ,出现了起义。

Nuxt 3 默认使用 Vite，最近Laravel 也效仿了。Vite 中还内置了一些非常新的框架，包括Sveltekit、Astro、Hydrogen和SolidStart。可以肯定地说，Vite 在前端开发生态系统中已经变得非常重要。

Vite 2 发布 16 个月后，Vite 团队最近宣布发布 Vite 3。Vite 的主要版本每年至少发布一次，以便与Node.js 版本的生命周期结束保持一致，并定期审查 Vite 的 API ，本质上为生态系统中的项目创建了更短的迁移路径。

在本文中，我们将介绍 Vite 3 附带的一些主要更新，并讨论如何从 Vite 2 迁移到 Vite 3。

主要 Vite 3 更新

兼容性和 ES 模块更新

Vite 不再支持已达到 EOL 的 Node v12。Vite 现在需要节点 14.18+ 才能运行。

Vite 现在以 ECMAScript 模块 (ESM) 的形式发布，带有 CJS 代理到 ESM 条目以实现兼容性。这对每个人来说都是个好消息，尤其是 ESM 爱好者，因为这保证了对开发人员更友好的体验。此外，现代浏览器基本支持原生ES 模块、原生ESM 动态导入和import.meta

新的 Vite 文档

Vite 3 带有全新的令人耳目一新的文档外观，以 Vitepress 作为其默认主题。Vitepress 是一个新的 Vite + Vue 驱动的静态站点生成器。它旨在成为一个简单、强大且高性能的静态站点生成器框架，其他站点如Vitest、vite-plugin-pwa和VitePress本身都是使用 Vitepress 构建的。

Vite 2 文档仍然可以在v2.vitejs.dev获得，并且现在在 main.vitejs.dev 有一个新的子域，每个对 Vite 主分支的提交都是自动部署的。这在测试 Vite 的 beta 版本时很有用。

除了之前的中文和日文翻译之外，现在还提供了文档的官方西班牙语翻译。

新 Vite 3 文档站点

创建 Vite 入门模板

create-vite 模板是使用您选择的框架快速测试 vite 的最直接的选项。Vite 3 根据新文档为所有模板提供了新主题。在这里查看它们：

这个主题在所有模板中共享，作为 Vite 的最小起点。但是，如果您想要一个更完整的解决方案，包括 linting、测试设置和其他功能，Vue和Svelte等框架有官方 Vite 支持的模板。可以在此处找到社区维护的模板列表：Awesome Vite。

开发和构建改进

让我们看看在 Vite 3 中对开发/构建体验所做的其他一些改进。

Vite CLI： Vite CLI 已在美学上进行了升级，其默认服务器端口现在5173是预览服务器监听在4173. 这确保了 Vite 将避免与其他工具发生冲突。

冷启动改进： Vite 现在可以避免在冷启动期间完全重新加载，当导入由插件注入时，同时爬行初始静态导入的模块。
import.meta.glob： import.meta.glob 在 V3 中添加了对命名导入和自定义查询等的更新。您可以在Glob 导入指南中阅读有关新功能的更多信息
WebAssembly 导入： WebAssembly 导入 API 已经过修订，以避免与未来标准发生冲突并使其更加灵活。在 WebAssembly 指南中阅读更多信息
我改进了相关基础支持： Vite 3 现在正确支持相对基础（使用 base: ''），允许将构建的资产部署到不同的基础而无需重新构建。这在构建时不知道基础时很有用，例如在部署到 IPFS等内容可寻址网络时。
捆绑包大小减少： Vite 3 的发布大小比其前身 (Vite 2) 减少了 30%

从 Vite 2 迁移到 Vite 3

尽管 Vite 3 是最近发布的，但生态系统中的大多数框架已经在迁移。Vite 团队将vite-ecosystem-ci放在一起，以针对 Vite 的主分支运行来自生态系统领先参与者的 CI，并在引入回归之前及时收到报告。

从 Vite 2 迁移到 Vite 3 应该就像更新依赖项一样。为了成功迁移到 Vite 3，请确保您已考虑以下事项：

Node.js 支持： 确保已安装 Node.js 14.18+/16+。不再支持 Node.js 的 12/13/15 版本。

浏览器支持： Vite 现在针对支持原生 ES 模块、原生 ESM 动态导入和 import.meta的浏览器

此类浏览器包括：

Chrome >=87
Firefox >=78
Safari >=13
Edge >=88

只有一小部分用户需要使用 @vitejs/plugin-legacy， 它会自动生成遗留块和相应的 ES 语言特性 polyfill。

配置选项更改： 注意以下在 V2 中已弃用且现已在 V3 中删除的配置选项。

alias （切换到 resolve.alias）
dedupe （切换到 resolve.dedupe）
build.base （切换到 base）
build.brotliSize （切换到 build.reportCompressedSize）
build.cleanCssOptions （Vite 现在使用 esbuild 进行 CSS 缩小）
build.polyfillDynamicImport （在不支持动态导入的浏览器中使用 @vitejs/plugin-legacy ）
optimizeDeps.keepNames （切换到 optimizeDeps.esbuildOptions.keepNames）

这些是迁移之前需要注意的一些主要变化。但是，建议您在将项目从 Vite 2 迁移到 Vite 3 之前查看官方文档中的迁移指南。

abinzhao