Vite 3.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 模式。

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

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

创建 Vite Starter Templates

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

现在所有模板都共享这个主题。对于更完整的解决方案,包括 linting、测试设置和其他功能;有一些框架的官方 Vite-powered 模板,如 create-vuecreate-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)。

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()
})

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。

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容