Vite

英语

简体中文
日本語
西班牙语
葡萄牙语
한국어
德语

英语

简体中文
日本語
西班牙语
葡萄牙语
한국어
德语

外观

超越速度

ViteConf 2023

观看回放！

Vite 3.0 发布！ ​

2022 年 7 月 23 日 - 查看 Vite 4.0 发布公告

去年 2 月，Evan You 发布了 Vite 2。从那时起，它的采用率一直在不断增长，每周的 npm 下载量超过 100 万次。在发布之后，一个庞大的生态系统迅速形成。Vite 正在推动 Web 框架领域的新一轮创新竞赛。Nuxt 3 默认使用 Vite。 SvelteKit、Astro、Hydrogen 和 SolidStart 都是用 Vite 构建的。 Laravel 现在决定默认使用 Vite。 Vite Ruby 展示了 Vite 如何改善 Rails 的开发体验。 Vitest 正在成为 Jest 的 Vite 原生替代方案。 Vite 是 Cypress 和 Playwright 的新组件测试功能背后的技术，Storybook 有 Vite 作为官方构建器。 而且 列表还在继续。 这些项目的大多数维护者都参与了 Vite 核心本身的改进，与 Vite 团队 和其他贡献者紧密合作。

Vite 3 Announcement Cover Image

今天，距离 v2 发布 16 个月，我们很高兴地宣布 Vite 3 的发布。我们决定每年至少发布一个新的 Vite 主版本，以与 Node.js 的 EOL 保持一致，并借此机会定期审查 Vite 的 API，为生态系统中的项目提供简短的迁移路径。

快速链接

如果您不熟悉 Vite，我们建议您阅读 为什么选择 Vite 指南。然后查看 入门指南 和 功能指南，了解 Vite 提供的开箱即用功能。与往常一样，欢迎您在 GitHub 上贡献。迄今为止，已有超过 600 位贡献者 帮助改进 Vite。在 Twitter 上关注更新，或加入我们 Discord 聊天服务器 上与其他 Vite 用户的讨论。

新文档 ​

访问 vitejs.dev 体验新的 v3 文档。Vite 现在使用新的 VitePress 默认主题，并提供令人惊叹的暗黑模式以及其他功能。

Vite documentation frontpage

生态系统中的多个项目已经迁移到它（参见 Vitest、vite-plugin-pwa 和 VitePress 本身）。

如果您需要访问 Vite 2 文档，它们将继续在线提供，地址为 v2.vitejs.dev。还有一个新的 main.vitejs.dev 子域名，每个提交到 Vite 主分支的代码都会自动部署到该子域名。这在测试 beta 版本或贡献核心开发时非常有用。

现在还有一个官方的西班牙语翻译，它被添加到之前的中文和日语翻译中。

创建 Vite 启动模板 ​

create-vite 模板一直是快速使用您喜欢的框架测试 Vite 的绝佳工具。在 Vite 3 中，所有模板都获得了与新文档一致的新主题。现在在线打开它们，开始使用 Vite 3 玩耍吧。

Vite logoVue logoSvelte logoReact logoPreact logoLit logo

该主题现在由所有模板共享。这将有助于更好地传达这些启动器的范围，即作为使用 Vite 入门的最小模板。对于更完整的解决方案，包括 linting、测试设置和其他功能，一些框架有官方的 Vite 支持的模板，例如 create-vue 和 create-svelte。在 Awesome Vite 中有一个社区维护的模板列表。

开发改进 ​

Vite CLI ​

  VITE v3.0.0  ready in 320 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

除了 CLI 的美观改进之外，您还会注意到默认的开发服务器端口现在是 5173，预览服务器监听端口 4173。此更改确保 Vite 将避免与其他工具发生冲突。

改进的 WebSocket 连接策略 ​

Vite 2 的一个痛点是在代理后面运行时配置服务器。Vite 3 更改了默认的连接方案，因此它在大多数情况下开箱即用。所有这些设置现在都作为 Vite 生态系统 CI 的一部分通过 vite-setup-catalogue 进行测试。

冷启动改进 ​

Vite 现在在冷启动期间避免完全重新加载，即使在插件在爬取初始静态导入的模块时注入导入 (#8869)。

点击了解更多

在 Vite 2.9 中，扫描器和优化器都在后台运行。在最佳情况下，如果扫描器能够找到所有依赖项，则在冷启动时无需重新加载。但如果扫描器错过了依赖项，则需要新的优化阶段，然后重新加载。Vite 能够在 v2.9 中避免一些重新加载，因为我们检测到新的优化后的块是否与浏览器已有的块兼容。但如果存在公共依赖项，子块可能会发生变化，并且需要重新加载以避免重复状态。在 Vite 3 中，优化后的依赖项在完成静态导入的爬取之前不会传递给浏览器。如果缺少依赖项（例如，由插件注入），则会发出快速优化阶段，只有在完成优化后才会发送捆绑的依赖项。因此，对于这些情况，不再需要页面重新加载。

两个图表比较了 Vite 2.9 和 Vite 3 的优化策略

import.meta.glob ​

import.meta.glob 支持已重写。阅读 Glob 导入指南 中有关新功能的信息

多个模式 可以作为数组传递

js
import.meta.glob(['./dir/*.js', './another/*.js'])

否定模式 现在受支持（以 ! 为前缀）以忽略某些特定文件

js
import.meta.glob(['./dir/*.js', '!**/bar.js'])

命名导入 可以指定以改进树摇动

js
import.meta.glob('./dir/*.js', { import: 'setup' })

自定义查询 可以传递以附加元数据

js
import.meta.glob('./dir/*.js', { query: { custom: 'data' } })

急切导入 现在作为标志传递

js
import.meta.glob('./dir/*.js', { eager: true })

将 WASM 导入与未来标准对齐 ​

WebAssembly 导入 API 已修改，以避免与未来标准发生冲突，并使其更灵活

js
import init from './example.wasm?init'

init().then((instance) => {
  instance.exports.test()
})

在 WebAssembly 指南 中了解更多信息

构建改进 ​

默认情况下使用 ESM SSR 构建 ​

生态系统中的大多数 SSR 框架已经使用 ESM 构建。因此，Vite 3 使 ESM 成为 SSR 构建的默认格式。这使我们能够简化之前的 SSR 外部化启发式方法，默认情况下外部化依赖项。

改进的相对基准支持 ​

Vite 3 现在正确支持相对基准（使用 base: ''），允许构建的资产部署到不同的基准而无需重新构建。这在构建时不知道基准时很有用，例如，当部署到像 IPFS 这样的内容寻址网络时。

实验性功能 ​

构建资产路径细粒度控制（实验性） ​

还有其他部署场景，这还不够。例如，如果生成的哈希资产需要部署到与公共文件不同的 CDN，那么在构建时需要对路径生成进行更细粒度的控制。Vite 3 提供了一个实验性 API 来修改构建的文件路径。查看 构建高级基准选项 以了解更多信息。

构建时 Esbuild 依赖项优化（实验性） ​

开发和构建时间之间的主要区别之一是 Vite 如何处理依赖项。在构建时，@rollup/plugin-commonjs 用于允许导入仅 CJS 依赖项（如 React）。当使用开发服务器时，esbuild 用于预捆绑和优化依赖项，并且在转换导入 CJS 依赖项的用户代码时应用内联互操作方案。在 Vite 3 的开发过程中，我们引入了必要的更改，以允许在构建时使用 esbuild 来优化依赖项。然后可以避免 @rollup/plugin-commonjs，使开发和构建时间以相同的方式工作。

鉴于 Rollup v3 将在未来几个月内发布，我们将继续进行另一个 Vite 主要版本，我们已决定使此模式可选，以减少 v3 的范围，并为 Vite 和生态系统提供更多时间来解决在构建时使用新的 CJS 互操作方法可能出现的问题。在 Vite 4 之前，框架可以根据自己的节奏默认切换到在构建时使用 esbuild 依赖项优化。

HMR 部分接受（实验性） ​

对 HMR 部分接受 有选择性支持。此功能可以为在同一模块中导出多个绑定框架组件解锁更细粒度的 HMR。您可以在 此提案的讨论 中了解更多信息。

捆绑包大小减少 ​

Vite 关心其发布和安装占用空间；快速安装新应用程序是一项功能。Vite 捆绑了其大多数依赖项，并尝试尽可能使用现代轻量级替代方案。继续这一持续目标，Vite 3 的发布大小比 v2 小 30%。

发布大小安装大小
Vite 2.9.144.38MB19.1MB
Vite 3.0.03.05MB17.8MB
减少-30%-7%

部分原因是，通过将大多数用户不需要的某些依赖项设为可选，从而实现了这种减少。首先，Terser 不再默认安装。由于我们已经使 esbuild 成为 Vite 2 中 JS 和 CSS 的默认缩小器，因此不再需要此依赖项。如果您使用 build.minify: 'terser'，则需要安装它（npm add -D terser）。我们还将 node-forge 移出单仓库，将对自动 https 证书生成的支持实现为一个新的插件：@vitejs/plugin-basic-ssl。由于此功能仅创建未添加到本地存储的不可信证书，因此它不值得增加大小。

错误修复 ​

最近加入 Vite 团队的 @bluwyoo、@sapphi_red 带领进行了一场分类马拉松。在过去三个月里，Vite 的开放问题从 770 个减少到 400 个。并且，在新增的开放 PR 处于历史最高水平的同时，实现了这一下降。与此同时，@haoqunjiang 还整理了对 Vite 问题的全面 概述。

Graph of open issues and pull requests in Vite

Graph of new issues and pull requests in Vite

兼容性说明 ​

  • Vite 不再支持已达到生命周期结束的 Node.js 12/13/15。现在需要 Node.js 14.18+ / 16+
  • Vite 现在作为 ESM 发布，并使用 CJS 代理到 ESM 入口以实现兼容性。
  • 现代浏览器基线现在针对支持 原生 ES 模块、原生 ESM 动态导入 和 import.meta 功能的浏览器。
  • SSR 和库模式中的 JS 文件扩展名现在使用有效的扩展名（js、mjs 或 cjs）来输出 JS 入口和块，这些扩展名基于其格式和包类型。

在 迁移指南 中了解更多信息。

Vite 核心升级 ​

在朝着 Vite 3 努力的过程中，我们还改进了协作者对 Vite 核心 的贡献体验。

  • 单元测试和 E2E 测试已迁移到 Vitest，提供更快、更稳定的 DX。此举也作为对生态系统中重要基础设施项目的试用。
  • VitePress 构建现在作为 CI 的一部分进行测试。
  • Vite 升级到 pnpm 7，遵循生态系统的其余部分。
  • 游乐场已从包目录移至 /playgrounds。
  • 包和游乐场现在是 "type": "module"。
  • 插件现在使用 unbuild 捆绑，并且 plugin-vue-jsx 和 plugin-legacy 已迁移到 TypeScript。

生态系统已准备好迎接 v3 ​

我们与生态系统中的项目密切合作，以确保由 Vite 提供支持的框架已准备好迎接 Vite 3。vite-ecosystem-ci 使我们能够针对 Vite 的主分支运行来自生态系统领先参与者的 CI，并在引入回归之前及时收到报告。今天的版本应该很快与大多数使用 Vite 的项目兼容。

致谢 ​

Vite 3 是 Vite 团队 成员与生态系统项目维护者和其他 Vite 核心协作者共同努力的结果。

我们要感谢所有为 Vite 3 实现功能和修复、提供反馈以及参与其中的人。

我们还要感谢赞助 Vite 团队的个人和公司，以及投资 Vite 开发的公司：@antfu7 在 Vite 和生态系统上的部分工作是其在 Nuxt Labs 的工作的一部分，以及 StackBlitz 聘请了 @patak_dev 全职为 Vite 工作。

下一步 ​

我们将用接下来的几个月时间确保所有基于 Vite 构建的项目的平稳过渡。因此，第一个次要版本将专注于继续我们的分类工作，重点关注新打开的问题。

Rollup 团队正在 开发其下一个主要版本，将在接下来的几个月内发布。一旦 Rollup 插件生态系统有时间更新，我们将跟进一个新的 Vite 主要版本。这将给我们另一个机会在今年引入更多重大变化，我们可以利用这些变化来稳定此版本中引入的一些实验性功能。

如果您有兴趣帮助改进 Vite，参与分类问题的最佳方式是加入 我们的 Discord 并查找 #contributing 频道。或者参与我们的 #docs、#help 其他人，或创建插件。我们才刚刚开始。有很多开放的想法可以不断改进 Vite 的 DX。