⭐看完vite纪录片才知道尤大有多屌(上)

最近 Vite 的纪录片不是发布了么,不看不要紧,一看才知道这纪录片简直群星荟萃啊!各种框架作者、各种构建工具作者以及各种流行库的核心维护人员都能在这个纪录片里看到他们的身影。其中不乏我们熟知的 Anthony Fu

以及 SvelteRollup 作者:

Solid 作者:

Angular.jsQwik 作者:

SnowpackAstro 作者:

Remix 核心成员:

以及那个男人:

正片

首先映入眼帘的便是那个男人的身影:

紧接着就是各种大佬出镜: 第一个出场讲话的是 Solid 作者:

他说:在 2005 年左右那阵从未有人正眼瞧过 JavaScript,那时的 JavaScript 如大家所见有点瑕疵。

译者:大佬入行够早的啊,怪不得能写出 Solid.js 这样的牛逼框架,他入行那阵估计好多人也就几岁或者十来岁而已吧?

然后镜头一转,换成了 Svelte 作者发言:

译者:侧面印证了这两款无虚拟 DOM 框架在国际上的地位,两位大佬是率先发言的。

他说:那时的情况和现在很不一样,对前端开发者而言,我们开始接受向客户端发送过多的 JavaScript 这一事实。

镜头一转,又回到了 Solid 作者这里:

他说:我们想要压缩我们的代码,并将各种库打包在一起。早期的时候有很多粗加工工具,像 GruntGulp 等:

镜头一转,换成了 David Cramer

他说:前端开发者主要编写 UI 代码,用 pipeline 的形式串联在一起,就像意大利面条似的。

镜头一转,换成了 SnowpackAstro 作者:

他说:我们越打包越多,我们都是打包完再发送到浏览器,所以自然就不会想到浏览器这个创新之地。

镜头一转,又轮到了 Solid 作者发言:

他说:当时我们正在一步步发展为单页应用,那时候很乱,但就在彼时,Webpack 出现了。

译者:镜头切换的过于频繁,每位大佬说一两句话就要切换一次镜头换成另外一位大佬发言,周而复始,半分钟的功夫就切了不下十次镜头。为了节省篇幅我们暂时就不说镜头一转的事了,不然的话会显得特别啰嗦,现在开始只注名了。

Svelte 作者:有个叫 Webpackbunler

Snowpack & Astro 作者:Webpack 通过 JavaScript 来传输所有内容,甚至 HTMLCSS 及图片都用 JavaScript 来打包构建。

Anthony Fu:当时所有的元框架都构建在 Wevpack 上。

Remix 核心成员:Webpack 确实是当时唯一的选择。

Vite 团队成员1:当时它是这个时代最好的工具。

Vite 团队成员2:大家的项目每年都在变得更复杂。

Solid 作者:项目越来越大。

Vite 团队成员3Webpack 启动速度非常慢,如果你的项目很庞大。

Remix 核心成员:项目刚开始的时候 Webpack 速度还行,但随着项目的发展...

Angular.js & Qwik 作者:在 JavaScript 中处理这些数据并不是最快的,对吗?

Snowpack & Astro 作者:每次点保存之后都得等半天。

Vite 团队成员1:每次 build 都得花个 5 分钟甚至更长,我们甚至有时间去咖啡机那边喝咖啡边聊天。

Snowpack & Astro 作者:喝完咖啡回来之后发现还没好。

Svelte 作者:大家并不喜欢 Webpack

译者:频繁的切镜头发现来回来去说的差不多都是吐槽 Webpack 的话,所以后面还有些镜头和发言就先省略了,基本全是吐槽 Webpack 的。

此时尤雨溪发言:

大概说的是一开始的时候 Vue Cli 是基于 Webpack 的,后来随着项目越来越大,速度也变得越来越慢,于是他就开始思考能否拥有一个不用打包的原生 ES Modules 本地开发服务,毕竟现代浏览器已经支持了 ES Module,那我们为什么还要打包呢?为什么不直接把 Modules 发送给浏览器,他希望这个方案能适用于 Vue 组件,于是这个项目就被命名为 @vue/dev-server

他觉得这玩意很有潜力,但当时的他还不确定该怎么做。直到 2020 年的 4 月份,他突然有思路了,于是他回到了办公室准备大干一场,结果这一干就干到了凌晨两三点。虽然第一版原型并不完整,但至少表明他的思路是对的,哪怕现在有个很大的 Vue 项目,点击保存之后也能在 100 毫秒内更新,而不是 5 秒以后才更新,这相当于 50 倍的改进。

当时他感到非常兴奋,随后便发了条推文:

之后又想出了 Vite 这个名字:

然后这条推文被 Anthony Fu 看见了:

他说看到之后他就去看了尤雨溪的开源代码,觉得非常酷,但它只是个概念验证,所以几乎没什么功能。

译者:紧接着又是频繁切换镜头,一个大佬一句话,其实一段话连起来看更顺畅。但导演就是这么设计的,视频里看起来没这么难受,但写成文字以后看起来就非常啰嗦。为了不让大家感到啰嗦,后面但凡是每人一句频繁切镜头的片段,每个人的姓名就暂不标注了,直接将他们每个人的每句话连起来组成个片段发出来,这样阅读起来会更顺畅。

大佬们每人一句:

我依稀记得 Vite 第一次出现的时候(切镜头换人)我认为它大约与 Snowpack 同一时间出现,它主要以构建 Vue 应用为主(切镜头换人)我不得不承认 Vite 的第一阶段还是很了不起的(切镜头换人)为什么要构建另一个 bundler?(切镜头换人)它有点粗糙,当时还处于早期阶段(切镜头换人)我把它当成一个令人好奇的项目(切镜头换人)在 Vite 的早期还有 Snowpack(切镜头换人)SnowpackVite 差不多在同一时间起飞(切镜头换人)尤:有趣的是我们两个来自不同的方向(切镜头换人)Snowpack作者:我们在高速发展时,尤雨溪进来了,为了解决 Vue 开发者所遇到的问题,他试图为 Vue 开发者制作更好的工具。而我进来时,Snowpack 正在试图干掉 Webpack

译者:没想到还没等干掉 Webpack 呢就先被 Vite 给干掉了吧

尤雨溪:我们基本上走到了同一个地方,所以我们有很多重叠的功能,这让我们变成了竞争对手。

Vite 核心团队成员、同时也是 SVite 的作者:

他是个 Svelte 粉,但 Svelte 当时也是用的 Webpack,他希望能有一款更好更快的工具,然后就发现了 Vite。但 Vite 那时候是专供 Vue 的,并不像 Webpack 那样与框架无关。于是他和 Rixo 花了好几个晚上破解 Vite,绕开了 Vite 的一些限制去编译 Svelte 组件,结果发现效果出奇的好,于是就起名叫 SVite。当然 Svelte 社区的人也很喜欢,这让他短短几周时间就涨了 300 多个 Star

镜头给到尤雨溪:

他当时正在迭代 Vite,想让 Vite 能在生产环境下可用。

镜头给到 AntFu

那时候的 Vite 也就 0 点几的样子,但那时候他就决定要试一下了。

尤雨溪:

Vite 1.0 是专门为 Vue 所打造的,但我希望其能够更加通用,能有插件系统之类的。因为当时还有很多其它竞争对手(不止 Snowpack)那些对手们各显神通,其中一个就是 WMR

我注意到 WMR 居然可以支持 Rollup 插件,这给了我很大的灵感:那我是不是也可以通过模拟 Rollup 环境来运行 Rollup 插件?如果这样的话就可以把 Vue 做成一个插件,还可以通过支持别的框架的 Rollup 插件来运行别的框架。所以我决定采用与 Rollup 相同的插件接口,并让 ViteVue 解藕:

又开始频繁切镜头了:

(切)尤雨溪正在尝试使其变得与框架无关,这是 Vite1Vite2 之间的最大不同点(切)我认为另一个重大创新采用了 RollupAPI(切)结果是你拥有了所有高级插件、所有代码转译功能(类似于咱们常说的编译)所有代码拆分功能以及路由处理功能,堪称革命性突破。

尤雨溪:

当我做出这个决定的时候,Vite 正处于 1.0 RC 的阶段,但我认为这次调整绝对物超所值,因此我决定放弃 1.0 的发布计划并着手进行全面重构,最终 Vite2.0 诞生了:

往期精彩文章

相关推荐
UpgradeLink2 小时前
Electron 项目使用官方组件 electron-builder 进行跨架构打包
前端·javascript·electron
蚂蚁不吃土&2 小时前
cmd powershell svm nodejs npm
前端·npm·node.js
Moment2 小时前
别再让 JavaScript 抢 CSS 的活儿了,css原生虚拟化来了
前端·javascript·css
CQ_YM2 小时前
Linux进程终止
linux·服务器·前端·进程
晓得迷路了3 小时前
栗子前端技术周刊第 110 期 - shadcn/create、Github 更新 npm 令牌政策、Deno 2.6...
前端·javascript·css
nvd113 小时前
GKE web 应用实现 Auth0 + GitHub OAuth 2.0登录实施指南
前端·github
前端小端长3 小时前
项目里满是if-else?用这5招优化if-else让你的代码清爽到飞起
开发语言·前端·javascript
笨小孩7873 小时前
Flutter跨平台开发全解析:从原理到实战的深度指南
javascript·react native·react.js
胡萝卜3.03 小时前
现代C++特性深度探索:模板扩展、类增强、STL更新与Lambda表达式
服务器·开发语言·前端·c++·人工智能·lambda·移动构造和移动赋值