Vite3.0发布，下一代的前端工具链

前端

距离 v2 发布 16 个月后，Vite 3.0 现已正式发布。公告指出，去年 2 月 Vite 2 发布以来，其采用率就在不断增长；每周 npm 下载量超过 100 万次，迅速形成了庞大的生态系统。Vite 正在推动 Web 框架的新一轮创新竞赛。

“我们决定至少每年发布一个新的 Vite 主要版本，以配合 Node.js 的 EOL，并借此机会定期审查 Vite 的 API，为生态系统中的项目提供简短的迁移路径。”

Vite 3.0 更新内容主要包括：

新文档

可前往 vitejs.dev 使用新的 v3 文档。Vite 现在使用新的 VitePress 默认主题，在其他 features 之间具有一个 Dark 模式。

生态系统中的几个项目已经迁移到这里（参见 Vitest、vite-plugin-pwa 和 VitePress 本身）。如果你需要访问 Vite 2 文档，它们将保留在 v2.vitejs.dev。还有一个新的 main.vitejs.dev 子域，其中对 Vite 主分支的每个提交都是自动部署的。这在测试 beta 版本或为核心开发做出贡献时很有用。

以及添加了一个正式的西班牙语翻译：

创建 Vite Starter Templates

create-vite 模板是一个很好的工具，可以用你最喜欢的框架快速测试 Vite。在 Vite 3 中，所有的模板都有一个与新文档一致的新主题。在线打开它们并立即开始使用 Vite 3：

现在所有模板都共享这个主题。对于更完整的解决方案，包括 linting、测试设置和其他功能；有一些框架的官方 Vite-powered 模板，如 create-vue 和 create-svelte。在 Awesome Vite 有一个由社区维护的模板列表。

开发改进

Vite CLI

1
2
3
4
**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-setup-catalogue作为 Vite Ecosystem CI 的一部分进行测试。

冷启动改进

Vite 现在可以避免在冷启动期间，当插件在抓取初始静态导入的模块时注入导入时完全重新加载（#8869）。

import.meta.glob

import.meta.glob 支持被重写。可阅读 Glob Import Guide 中的新功能：

多个模式可以作为数组传递
*import*.meta.glob(['./dir/*.js', './another/*.js'])

现在支持 Negative Patterns（以 ! 为前缀）以忽略某些特定文件
*import*.meta.glob(['./dir/*.js', '!**/bar.js'])

可以指定 Named Imports 以改进 tree-shaking
*import*.meta.glob('./dir/*.js', { import: 'setup' })

可以通过自定义查询以 attach metadata
*import*.meta.glob('./dir/*.js', { query: { custom: 'data' } })

Eager Imports 现在作为一个 flag 传递
*import*.meta.glob('./dir/*.js', { eager: true })

使 WASM Import 与 Future Standards 保持一致

WebAssembly Import API 已经过修订，以避免与 Future Standards 发生冲突并使其更加灵活：

1
2
3
4
5
6
import init from './example.wasm?init'

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

在 WebAssembly guide 中了解更多信息。

构建改进

ESM SSR 默认构建

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

改进的 Relative Base 支持

Vite 3 现在正确支持 relative base（使用 base: ''），允许将构建的资产部署到不同的 bases 而无需重新构建。这在构建时不知道 base 的情况下非常有用，例如在部署到 IPFS 等内容可寻址网络时。

减少捆绑包大小

Vite 捆绑了它的大部分依赖项，并尽可能地尝试使用现代轻量级替代方案。Vite 3 的发布大小比 V2 小了 30%。

错误修复

在过去的三个月里，Vite 的 open issues 从 770 个减少到了 400 个。

兼容性说明

  • Vite 不再支持已达到 EOL 的 Node.js 12。现在需要 Node.js 14.18+。
  • Vite 现在以 ESM 的形式发布，为了兼容，在 ESM entry 中加入了 CJS 代理。
  • Modern Browser Baseline 现在针对支持原生 ES 模块、原生 ESM 动态导入和特性的浏览器以支持原生 ES 模块、原生 ESM 动态导入和 import.meta功能的浏览器为目标。
  • SSR 和 library 模式下的 JS 文件扩展名现在使用有效的扩展名（js、mjs 或 cjs）来输出基于其格式和包类型的 JS entries 和 chunks。

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

涅槃快乐热爱生活，追求技术

个人简介。