Vite如何成为JavaScript的"联合国"

想必所有前端开发在 2020 年以前都有过这种经历吧：改了一行代码，按下保存，然后就开始盯着屏幕发呆。五秒、十秒……咖啡都凉了，页面还在“编译中”。这时候都会让你怀疑人生：我到底是在写代码，还是在陪电脑玩“等等我”的游戏？我是不是要把编辑器的自动保存关掉？

2020 年 4 月的某个深夜，Vue.js 的框架创始人 Evan You 也被这个问题折磨够呛。不同的是，他没有选择躺平摆烂，而是开始疯狂敲代码。到凌晨 3 点，一个原型出来了——它快得让人怀疑是不是眼花了：页面更新从 5 秒变成 100 毫秒，整整 50 倍的提升。

这就是 Vite 的诞生故事。更神奇的是，这个凌晨 3 点 hack 出来的玩意儿，最终居然成了整个 JavaScript 生态的标准答案，现在每周有 3K 万次下载。这个逆袭故事告诉我们：有时候改变世界，只需要一个失眠的夜晚和一个受够了的开发者。

1. 等待编译的痛苦

让我先说说为什么会有 Vite 这东西。

早年的 JavaScript 开发就像拼积木，你得用 Grunt、Gulp 这些工具把代码“串”起来。后来 Webpack 出现了，大家都觉得终于有救了——它能把所有东西打包在一起，还支持热更新。

但问题来了：随着项目越来越大，Webpack 就像一个越吃越慢的老爷车。“每次按保存，就得等着building building building……有时候要等 5 分钟以上，足够你摸鱼玩把消消乐了。”

更要命的是，Webpack 的配置复杂到让人怀疑人生。曾几何时还有 Webpack 配置工程师的岗位，有人调侃：“团队需要一个博士学位才能配置好 Webpack。对于一个老旧项目来说更改 Webpack 配置是史上最大的冒险游戏。”

这不只是工具的问题，而是开发体验的灾难。想象一下，你正在灵感爆发的时刻，结果每改一行代码都要等半天，那种感觉就像在跑步机上跑步却一直原地踏步。

2. 凌晨 3 点的顿悟

Evan You 当时就在想：浏览器现在都支持原生 ES 模块了，我们为什么还要在开发时把所有东西打包起来呢？能不能直接把模块发给浏览器？

“2020 年 4 月的某天，突然就想通了——如果这样做，热更新就能直接基于原生 ESM 工作了。一旦想法冒出来，你就忍不住要马上试试。”

所以他一直干到凌晨 3 点。当原型跑起来的那一刻：“快得让人难以置信。更新时间从几秒变成了 100 毫秒，整整 50 倍的改进。我们之前从来没有过这样的东西，我超级兴奋。”

他给这个工具起了个法语名字：Vite（意思是“快”）。第二天就发了推，然后把第一版发布了。

Evan 不是为了显摆技术才做 Vite，他只是受够了自己的开发体验太烂。当你为了解决自己的痛点而创造东西时，往往能打动同样痛苦的人。

3. 最尴尬的“变心”

这里有个特别戏剧性的故事。

2020 年底，Svelte 团队在开发新框架 SvelteKit 时，面临一个选择：用 Snowpack 还是 Vite？当时 Snowpack 更成熟，Vite 还只是个“玩具”。于是 Rich Harris(Svelte 的创始人）公开宣布：我们选 Snowpack!。Rich 全力支持这个技术。他甚至做了公开声明：我们要用 Snowpack。我当时想，这就是我们的 Webpack 时刻，势不可挡。

但剧情反转来得太快。几个月后，Vite 2.0 发布了，SvelteKit 团队发现：咦，这个好像更好用啊？于是他们非常“抱歉”地跟 Snowpack 团队说：“我们得跟你们分手了。”

技术世界没有永远的站队。SvelteKit 的转向看起来尴尬，但实际上展示了开源社区的健康心态——选择最好的工具，而不是为了面子死磕到底。这种灵活性反而让整个生态更强大。

4. 消失 4 小时的魔术

到 2021 年底，Vite 越来越火，但有个大问题：测试工具跟不上。

当时的测试框架 Jest 跟 Vite 配合得很别扭，很多早期用户都抱怨这个问题。在一次团队会议上，Evan 半开玩笑地说：“要不我们自己做个测试工具，叫 Vitest?”，然后团队成员 Anthony Fu 说：“我试试看。”

接下来的事情就很玄幻了：

❝Anthony 就是个疯子。 他消失了 4 小时。 第二天他说：我搞出了一个可用的原型。

就这样，Vitest 诞生了——一个从头开始写的测试框架，完全理解 Vite 的配置，开箱即用。

这个故事告诉我们两件事。第一，好的工具生态不是一蹴而就的，需要持续解决痛点。第二，有时候最疯狂的想法反而最靠谱——当所有人都觉得“这不可能 4 小时搞定”时，总有人能做到。

5. 最反直觉的拥抱

这个特别有意思。Vite 是 Vue 作者做的，你可能以为会先在 Vue 社区火起来。但实际上：

❝早期的采用主要来自 React 阵营

为什么？因为 React 社区当时在用 Create React App，那玩意儿已经老得掉牙了。Vite 正好是个完美的替代品：更轻、开箱即用、配置简单、各方面都更快。

有个开发者（Theo Browne）甚至在自己的频道上“痛批”Create React App，然后提交了一个 PR 把它换成 Vite。这事儿还引发了不小的争议，连 React 核心开发者 Dan Abramov 都写了长文回应。技术没有阵营之分。当一个工具真的好用，即使它来自“对手阵营”，大家也会张开双臂拥抱。

6. 生态系统 CI

随着越来越多框架依赖 Vite，团队面临一个可怕的问题：每次发布新版本，怎么确保不会搞崩下游的项目？

最开始的做法很原始：逐个找维护者沟通，“嘿，我们要改这个，麻烦你测试一下？”显然这种方式不可持续。

然后团队想出了一个绝妙的方案：Vite 生态系统 CI。

❝我们不只测试自己的 CI，还要测试所有主要下游项目的 CI。现在我们有了自动化流程，只有当所有下游项目的 CI 都是绿色时，我们才会发布。

这意味着每次发布前，Vite 会自动跑 Sveltekit、Nuxt、Remix 等所有主要框架的测试。绿灯全亮，才敢发布。

这是开源维护的最高境界。很多项目只管自己爽，不管会不会搞崩别人。但 Vite 团队把“不作死”变成了自动化流程，这种责任感和前瞻性，正是它能成为生态基础设施的关键原因。

7. 从竞争到合作

还记得前面提到的 Snowpack 吗？它本来是 Vite 的最大竞争对手，甚至一度比 Vite 还火。

但当 Vite 2.0 发布后，形势逆转了。SvelteKit 倒戈，越来越多项目选择 Vite。Snowpack 团队这时候做了一个很漂亮的决定：

❝我们本可以埋头继续做一个更好的 Snowpack，也许战斗还能再持续一阵子。但如果打不过，为什么不加入呢？

于是 Snowpack 团队转向了一个新项目：Astro。而 Astro 从第一天起就基于 Vite 构建。

❝Astro 团队决定加入 Vite 社区，一夜之间 Vite 就有一群优秀的贡献者。

这是技术圈最美的故事——竞争不是零和游戏，有时候合作能创造更大的价值。Snowpack 团队没有死磕到底，而是把精力投入到更有意义的事情上。结果是双赢：Vite 获得了更多贡献者，Astro 成为了一个成功的框架。

结语

今天，Vite 每周有 3000 万次下载，几乎每个现代 JavaScript 框架（除了 Next.js）都在用它。从 Vue、React、Svelte，到 Remix、Astro、Qwik，甚至连测试工具 Playwright、Cypress 也都支持 Vite。

❝大家都形容它是 JavaScript 的‘联合国’。

之后，Evan You 创办了 VoidZero 公司，准备从底层重构整个 JavaScript 工具链。他的愿景是：

❝JavaScript 生态应该有一个统一的工具链。我们要让 JavaScript 开发者比以往任何时候都更高效。

voidzero.dev

Vite 的成功告诉我们：

1. 好工具来自真实的痛点。
2. 开放心态赢得一切。 Vite 能成功，不是因为它“消灭”了竞争对手，而是因为它让所有人都能在同一个基础上合作。
3. 社区文化比技术更重要。 正如 Vite 纪录片里说的：

❝工具能否流行，不只是看谁做得最好，更重要的是文化。