【第2222期】下一代前端构建工具 ViteJS 技术解读

序言

前一两年才刚正式发布了【第2204期】Vite 2.0 正式发布了。今日后端早读课该文由@青莲许可撷取。

@青莲，硕士学位大学毕业于北京航空航天大学，兰契总于招商银行信息科学技术部，基础控制技术板块后端相关人士，希望通过后端提效借力金融信息技术。

节录从这开始~~

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

有关 Vite 读法的肉体拷打：难道 Vite 使用的是其法文读法，那为何 Vue 不用它的法文读法呢？（约莫原因在于法文读法不好听吧）。孔布龙告诉我们，译者说是不是读那就是不是读吧。

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

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

本质原因应该是大部份现代浏览器（除了 IE 11）已经对原生 ES 模块支持的很好了，而且新版的 Node 也支持 ESM 了。ESM 终于可以在不久的将来一统江湖。原生的就是香。

不使用 @vitejs/create-app，从 0 开始创建一个 Vite 工程 demo。

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

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

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

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

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

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

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

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

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

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

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

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

SSR 目前还处于实验阶段

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

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

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

有关本文 译者：@青莲 原文：https://juejin.cn/post/6937176680251424775

为你推荐

【第2072期】 或许这就是新一代组件库

【第2218期】Google正式发布Flutter 2.0正式版，支持全平台程序构筑

欢迎自荐投稿，前端早读课等你来