Vite 纪录片心得 — 挑战现状是创新的开始

这周 JavaScript 社群中最热门的构建工具 Vite，推出了纪录片。还不熟这工具的读者，可以参考先前我们写的《Vite 是什么? 为什么要用 Vite? 它解决了哪些问题? 又是如何解决?》一文。

该纪录片从历史梳理的角度，带着观众走过当初 Vite 如何从一个想法，逐步演进成 JavaScript 社群不分框架都使用、全球每周下载量最高的构建工具。以下让我们

JavaScript 生态系的演进

假如有经历过早些年的网页开发，大概都有印象 JavaScript 这个仅在短短 10 天内被写出来的程式语言，在过去一直被视为“有缺陷”的语言，在早年也不被当一回事，大概就是用来写点简单网页互动用而已。

但随着浏览器越来越强大，开发者在浏览器上用 JavaScript 做的事越复杂，也让前端开发逐渐演变成一个不一样的世界。当时要把 JavaScript 程式码传到浏览器端，会用 Grunt、Gulp 这样的工具，把程式码压缩等环节串成一条流程，但是随着要处理的事情越多，这个流程越变越混乱。

当时社群出现了 Webpack 这个救星。Webpack 是个打包工具，把所有要送到前端的 HTML、CSS、JavaScript 或静态资源（图片等），都一并打包处理。因为 Webpack 很好用，所以逐渐成为社群最热门的选择。

然而，随着前端的专案变得越来越大，Webpack 的问题也随之浮现。举例来说，大型专案的启动变得很慢，以热模组更新（HMR）来说，每次按下储存都得等很久。而且很多打包工作其实不是每次都需要，导致原本为了效能而导入的打包流程，最后变成一种必要之恶。开发伺服器重启久到可以去倒杯咖啡聊两句，回来后还得继续等。

挑战现状是创新的开始

Vite 的作者 Evan You 早年的代表作 Vue 的官方 Vue CLI，原本也是基于 Webpack，主要因为 Webpack 提供了的热模组更新功能。但随着 Vue 专案变大，HMR 的效能逐步恶化。Evan 看到社群中开发者们的抱怨，而多数 Vue 开发者最糟的开发体验问题根源就是 Webpack。

这让 Evan 开始反思“对开发伺服器来说，为什么程式码改动后一定要每次都重头打包？”而正是因为这个挑战现状的想法，让 Vite 孕育而生。

在最开始，Vite 还不叫 Vite，而是叫 Vue Dev Server，因为 Evan You 想要建构一个让 Vue 能用的更快的开发伺服器。Vue Dev Server 的第一版原型，是利用原生的 ES Modules，让模组直接替换，所以热模组更新就不需要重新打包整个应用。

在有了这个想法后，Evan You 在当天一路实作到半夜，把第一版原型写出来。而第一版的原型把原本要跑 5 分钟的热模组更新加速到 100 毫秒，速度提升了 50 倍。因为实在太快，Evan You 把原本叫 Vue Dev Server 的这个原型改称为 Vite（备注：Vite 是法文的“快”，所以发音不是 vai-tuh，而是 vee-tuh）。

通用化是普及的开始

由于 Evan You 早些年主要专注在 Vue 的开发，所以当 Vite 推出后，在 Vue 以外的前端社群并没有太重视。在那时，社群中有另一个同样试图解决 Webpack 问题的工具 Snowpack，是社群中多数人关注的焦点。

不过在 Vite 推出没多久，Svelte 社群的人开始尝试用 Vite。当时因为 Svelte 作者开发的 Rollup 同样跑很慢，所以有位叫 Rixo 的开发者试着把 Vite 整合到 Svelte 来加速，结果效果出奇地好，这让 Svelte 社群也开始关注 Vite。

这个转变也让 Vite 逐渐脱离“只是 Vue 的工具”的形象。

不过，让 Vite 真正成为通用的关键，在于 Vite 的架构设计上，选择了完全兼容 Rollup 的插件介面设计，与此同时以轻量为基底，插件系统为延伸，避免犯下 Webpack 过于难设定的错误。

这个架构设计看起来简单好理解，但在当时 Vite 团队为了实现这个架构，必须全面重写 Vite。虽然重写是个艰难的决定，但回过头看，这是个再正确不过的决定。

因为这个架构设计，Vite 做到开箱即用，不需要复杂的配置，不需要把半天一天时间花在 Webpack 设定上；开发者只需要安装 Vite、写个几行左右的设定，然后就能使用。正是因为如此简单，让 Vite 能轻易被用在不同的框架与工具中，让 Vite 得以如此普及。

Vite 的通用化与普及，间接地促使前端社群的氛围转变。过去许多工具与框架彼此是以竞争的角度在互动；但是现在几乎什么工具与框架（Nuxt 3、Qwik、Laravel、SvelteKit、Storybook、SolidStart、Shopify Hydrogen 等等），底层都是使用 Vite。过去在各自的技术会议上王不见王，但在第一届的 Vite Conf 中，这些过去的竞争对手却齐聚一堂，这样的转变在过去是难以想像的。

脱离用爱发电是永续的开始

在观看这个纪录片时，有一段篇幅不长，但是我们觉得非常关键的点，那就是 Vite 的永续开发。Vite 之所以能够在短短几年，成功取代 Webpack，是因为有一群人稳定不懈地贡献其中。而这些人之所以能够不用担心经济，甚至以全职的方式投入，是因为他们能跳脱单纯的用爱发电贡献法。

Evan You 本身因为过去开发 Vue 所以本身有稳定的经济来源，然而假如其他的贡献者只能用下班与周末投入，Vite 的发展不会如此快速。在纪录片中可以看到，Vite 的核心团队获得 StackBlitz、NuxtLabs 等公司的财务支持，这些公司让员工能够全职投入贡献 Vite，对于 Vite 的发展来说非常关键。

过去看过非常多开源专案，原本声势看涨，但后继无力，不少是因为主要贡献者没办法持续大量时间投入。反之，有些能长期持续更新的开源专案，背后多半是基于有稳定的财务支持。

财务的支持不必然是营利的，核心的关键在于让贡献者不会因为要支持自己生活所需，所以不能把时间花在贡献上。举例来说，著名的 Zig 背后的 Zig Software Foundation 即是非营利组织（换句话说，所有的资金都是用在支持贡献者，而不会把赚来的钱回馈给投资人）。

以我们自己做 ExplainThis 的经验，当初开启 E+ 这个专案（连结），核心目的之一也是为了有永续的模式；因为有 E+ 的存在，让 ExplainThis 在过去两年能够稳定且持续产出内容。

小结

以上三个点“挑战现状”“通用化设计”，以及“永续模式”，是我们看完 Vite 纪录片后，觉得收获最多的观点。该纪录片拍得非常精彩，因此推荐读者们有时间的话，务必不要错过了。