您的当前位置:首页>全部文章>文章详情

Vite 3.0 发布,下一代的前端工具链

发表于:2022-07-15 15:18:30浏览:1206次TAG: #Vite #前端工具链 #Vue

距离 Vite2 发布 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 模式。

图片alt

生态系统中的几个项目已经迁移到这里(参见 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

  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)。

图片alt

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 发生冲突并使其更加灵活:

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: ‘’),允许将构建的资产部署到不同的 bases 而无需重新构建。这在构建时不知道 base 的情况下非常有用,例如在部署到 IPFS 等内容可寻址网络时。

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

图片alt

错误修复
在过去的三个月里,Vite 的 open issues 从 770 个减少到了 400 个。

图片alt

兼容性说明
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。