Vite 3.0 正式发布，下一代前端构建工具！

7 月 13 日，Vite 3 正式发布，它被称为下一代的前端东西链。Vite 团队抉择至少每年发布一个新的 Vite 首要版别，以与 Node.js 的 EOL 保持共同，并借此时机定时查看 Vite 的 API，为生态系统中的项目供给较短的搬迁途径。

去年 2 月，Vite 2 正式发布。从那时起，它的运用率不断增加，每周 npm 下载量逾越 100 万次。发布后迅速形成了巨大的生态系统。Vite 正在推动 Web 结构的新一轮立异比赛。Nuxt 3 默许运用 Vite。SvelteKit、Astro、Hydrogen 和 SolidStart 都是用 Vite 构建的。Laravel 现在抉择默许运用 Vite。Vite Ruby 展示了 Vite 怎样改进 Rails DX。Vitest 作为 Jest 的 Vite-native 代替品正在获得长足进步。Storybook 将 Vite 作为官方构建器。而且名单还在持续不断扩大。大多数这些项目的保护者都参加了 Vite 中心的改进，与 Vite团队和其他贡献者密切合作。

全新文档

全新的 v3 文档发布，可曾经往 vitejs.dev 查看。Vite 现在运用新的 VitePress 默许主题，其支撑漆黑办法。

生态系统中的几个项目的文档也现已搬迁到了VitePress（ Vitest、vite-plugin-pwa 和 VitePress）。

假如需求拜访 Vite 2 的文档，可曾经往 v2.vitejs.dev 查看。除此之外，还有一个新的 main.vitejs.dev，每次提交到 Vite 的主分支都会主动安置。 这在检验 beta 版别或为中心开发做出贡献时很有用。

文档新增了一个正式的西班牙语翻译，现在官网文档供给了英语、简体中文、日语、西班牙语版别。

创建 Vite 入门模板

create-vite 模板是一个很好的东西，能够用你最喜欢的结构快速检验 Vite。 在 Vite 3 中，全部的模板都有一个与新文档共同的新主题。

在线体会模版：

• Vite：stackblitz.com/edit/vitejs…
• Vite + Vue：stackblitz.com/edit/vitejs…
• Vite + Svelte：stackblitz.com/edit/vitejs…
• Vite + React：stackblitz.com/edit/vitejs…
• Vite + Preact：stackblitz.com/edit/vitejs…
• Vite + Lite：stackblitz.com/edit/vitejs…

该主题现在由全部模板同享。关于更完整的解决方案，包含linting、检验设置和其他功用，有一些根据 Vite 的官方模板，如create-vue 和 create-svelte。Awesome Vite 上有一个社区保护的模板列表。

Awesome Vite：github.com/vitejs/awes…

开发改进

Vite CLI

VITE v3.0.0  ready in 320 ms
➜  Local:   http://127.0.0.1:5173/
➜  Network: use --host to expose

除了 CLI 的美观改进之外，默许的 dev server 的端口现在是 5173，而 preview server 的端口现在是 4173。此更改可保证 Vite 避免与其他东西发生冲突。

改进的 WebSocket 衔接战略

Vite 2 的痛点之一是在署理之后运转时装备服务器。Vite 3 更改了默许衔接方案，因而在大多数情况下都是开箱即用的。全部这些设置现在都通过 vite-setup-catalogue 作为 Vite 生态系统 CI 的一部分进行检验。

冷启动改进

Vite 现在能够避免在冷启动期间，当插件在抓取初始静态导入的模块时注入导入时完全从头加载。

import.meta.glob

import.meta.glob 支撑被重写。下面是 Glob Import Guide 中的新功用：

• 多个匹配办法能够作为数组传递

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

• 现在支撑不和匹配办法（以!为前缀）以疏忽某些特定文件

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

• 能够指定签字导入以改进tree-shaking

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

• 能够运用 query 选项来供给对导入的自定义查询，以供其他插件运用

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

• eager 作为 Glob 导入的一个标识传入

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

将 WASM import 与未来标准对齐

修改了 WebAssembly import API，以避免与未来的标准发生冲突，并使其愈加活络：

import init from './example.wasm?init'
init().then((instance) => {
  instance.exports.test()
})

构建改进

ESM 成为 SSR 构建的默许格局

生态系统中的大多数SSR结构现已在运用ESM构建。因而，Vite 3 使 ESM 成为 SSR 构建的默许格局。这使我们能够简化曾经的 SSR 外部化启发式办法，默许情况下外部化依托项。

改进的 Relative Base 支撑

Vite 3 现在正确支撑 Relative Base（运用base: ”），答应将构建的产物安置到不同的 base，而无需从头构建。这在构建时不知道 base 的情况时很有用。

减小构建体积

Vite 关怀它的发布和装置足迹； 快速装置新应用程序是一项功用。 Vite 打包了它的大部分依托项，并尽可能地测验运用现代轻量级代替方案。持续这个持续的目标，Vite 3 的发布规划比 v2 小了 30%。

Bug 修复

在曩昔的三个月里，Vite 的敞开 issues 从 770 削减到了 400。而这一下降是在新敞开的 PR 处于历史最高水平的情况下完结的。

兼容性阐明

• Vite 不再支撑 Node.js 12，现在需求 Node.js 14.18+。
• Vite 现在以 ESM 的办法发布。
• 现代浏览器 Baseline 现在支撑本地 ES 模块、本地 ESM 动态导入和 import.meta 功用的浏览器。

Vite 中心晋级

在开发 Vite 3 的一起，还改进了合作者对 Vite 中心的贡献体会。

• 单元和 E2E 检验已搬迁到 Vitest，供给更快、更安稳的 DX。
• VitePress 构建现在作为 CI 的一部分进行检验。
• Vite 晋级到 pnpm 7，跟从生态系统的其余部分。
• Playgrounds 已从 packages 目录移到/playgrounds。
• packages 和 playgrounds 现在是"type": "module"。
• 插件现在运用 unbuild 进行构建，而且 plugin-vue-jsx 和 plugin-legacy 已移至 TypeScript。

生态系统已为v3做好准备

Vite 团队与生态系统中的项目密切合作，以保证由 Vite 支撑的结构为 Vite 3 做好准备。vite-ecosystem-ci 答应我们针对 Vite 的主分支运转生态系统中抢先参加者的 CI，并在引入回归之前及时收到陈说。v3 版别很快就会与大多数运用 Vite 的项目兼容。

下一步

Vite 团队将在接下来的几个月内保证全部根据 Vite 构建的项目都能顺畅过渡。

Rollup 团队正在开发下一个首要版别，并将在接下来的几个月内发布。一旦 Rollup 插件生态系统有时间更新，Vite 团队将跟进一个新的首要版别。这将是另一个在本年引入更重大改动的时机，能够利用这些改动来安稳此版别中引入的一些实验性功用。

原文：vitejs.dev/blog/announ…