下一代前端构建工具 ViteJS 技术解读

2022-12-05 0 423

有关 Vite,来看看译者生前是不是说。本音频是 Vue 和 Vite 译者 尤雨溪 在 2021 年 2 月 12 日在 Twitch 上开讲 GitHub Open Source Friday 节目的现场直播音频。在音频里有孔布龙有关 Vite 的每项机能的详尽阐释、天神新浪网代码、新浪网 Debug、元老 diss webpack 和对 Vite 的神学思索。本音频极短,吻合 70 两分钟,上面是音频节录,雷西县我们观赏音频,里头有许多技术细节坚信我们会有斩获。

Vite 的读法问题

有关 Vite 读法的肉体拷打:难道 Vite 采用的是其法文读法,那为何 Vue 不必它的法文读法呢?(约莫原因在于法语读法不太好听吧)。孔布龙告诉我们,译者说是不是读那就是不是读吧。

下一代前端构建工具 ViteJS 技术解读

个人认为 Vue 和 Vite 的文件格式可说是良知了,首先就交待他们英文名字的读法,让全球合作开发人员标准化知觉。再来看 Svelte,不必说读法了,迄今拼法还讲错。

Vite 是甚么

下一代前端构建工具 ViteJS 技术解读

孔布龙他们也说,极难一句话叙述确切 Vite 究竟是甚么。主要就其原因可能是它主要就包括两个部份,两个如前所述 ESM 的利用 esbuild 的合作开发伺服器,另两个部份是如前所述 Rollup 的实用性化的装箱器。当然还有许多其他强悍的机能,但是早已超过一句话了。孔布龙说市售最吻合 Vite 的产品是 Parcel,但两者的实现基本原理完全不同。

为何 Vite 在此时此刻出现

下一代前端构建工具 ViteJS 技术解读

其本质其原因应该是大部份现代应用程序(除了 IE 11)早已对原生植物 ES 组件全力支持的较好了,而且旧版的 Node 也全力支持 ESM 了。ESM 终于可以在没多久的今后逆天。原生植物的就是香。

起跑 Demo

不采用 @vitejs/create-app,从 0 开始创建两个 Vite 工程 demo。

下一代前端构建工具 ViteJS 技术解读

入口文件是 index.html

下一代前端构建工具 ViteJS 技术解读

Vite 是 Opinionated 的

下一代前端构建工具 ViteJS 技术解读

划重点,Vite 是 Opinionated 的,音频里多次展示了这块内容。

其实 opinionated 本来是个贬义词,是固执己见的意思,而用在计算机科学领域,又变成了两个绝对的褒义词,号称他们 opinionated 的辅助工具通过约定保证了易用性,又提供了实用性以保证不会丧失灵活性。Vite 中内置了大量最佳实践的约定,省去了繁琐的实用性,保证后端合作开发人员常用的机能都是开箱即用的。

那么问题来了,列出几个 opinionated 和 unopinionated 的软件。我先来:Opinionated 的有 Vite、Prettier, Unopinionated 的比如 webpack,当然 unopinionated 可不是好词,应该不会有人在官方文件格式里写自己是 unopinionated 的。这段是有关 webpack 的,看元老如何 diss webpack:

下一代前端构建工具 ViteJS 技术解读

Vue CLI 会迁移到 Vite 上吗

暂时不会,目前依然是如前所述 webpack 的,但是最终肯定是会迁移到 Vite 上的。

下一代前端构建工具 ViteJS 技术解读

Vite 是框架无关的

下一代前端构建工具 ViteJS 技术解读

Vite 提供了定义得非常好的 JavaScript API,可以在更高层级采用,比如 VitePress,它是 VuePress 的孪生兄弟,如前所述 Vite 构筑。

Tailwind CSS + Vite 实战

孔布龙新浪网编写 Tailwind 代码翻车。

下一代前端构建工具 ViteJS 技术解读

主持人调侃,原来 Evan You 也需要 debug 啊。

下一代前端构建工具 ViteJS 技术解读

Vite + React 实战

主持人调侃,我们新浪网围观尤雨溪写 React!

下一代前端构建工具 ViteJS 技术解读

有关 Esbuild —— “快”就两个字

下一代前端构建工具 ViteJS 技术解读

Esbuild 是 Vite 为何如此快速的其原因,它比传统 tsc 快 20-30 倍。Vite 用 esbuild 替代 Rollup 进行预装箱,速度也非常快。

这里孔布龙透露了他的工作电脑,搭载 M1 芯片的 ARM 架构的 Mac Book Pro,遗憾的是,当时的 esbuild 还不全力支持 ARM 架构,但 Go 的最旧版早已全力支持。没想到过了几天,esbuild 就发布了其全力支持 M1 芯片的版本,孔布龙在第一时间做了测试:

下一代前端构建工具 ViteJS 技术解读

DX 是啥

在音频翻译过程中,听到孔布龙说了 DX 一词,由于不知道是甚么含义,反反复复听了好多遍,后来 Google 发现,原来 DX 是 Developer Experience 的意思,看来关爱合作开发人员是有官方术语的,有关 DX 的解释可以参考 What Is DX? (Developer Experience)。

Vite 利用其快速的特性,极大提升了合作开发人员的体验,孔布龙直言,他就像被宠坏了的孩子,项目启动超过 1 秒,他就极难忍受了。

下一代前端构建工具 ViteJS 技术解读

有关 SSR

SSR 目前还处于实验阶段

有关 HMR

Vite 真正解决了 HMR 速度与随着应用越来越大而越来越慢的问题。

下一代前端构建工具 ViteJS 技术解读

为啥生产模式不必 esbuild,不是更快吗?

其实也想用,但是 esbuild 目前对生产包全力支持不够健壮,许多实用性无法通过 esbuild 实现。所以目前而言,Rollup 是两个好选择,虽然远比 esbuild 慢。

另外,可以用 esbuild 作为压缩器,替代 terser,详见 build.minify,这样会更快,但是包的体积可能会有 5% – 10% 左右的增长,看用户取舍。

译者:@清秋 原文:https://juejin.cn/post/6937176680251424775

如果觉得这篇文章还不错,来个【分享、点赞、在看】三连吧,让更多的人也看到~

下一代前端构建工具 ViteJS 技术解读

点个『在看』全力支持下 下一代前端构建工具 ViteJS 技术解读

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务