有关 Vite,来看看译者生前是不是说。本音频是 Vue 和 Vite 译者 尤雨溪 在 2021 年 2 月 12 日在 Twitch 上开讲 GitHub Open Source Friday 节目的现场直播音频。在音频里有孔布龙有关 Vite 的每项机能的详尽阐释、天神新浪网代码、新浪网 Debug、元老 diss webpack 和对 Vite 的神学思索。本音频极短,吻合 70 两分钟,上面是音频节录,雷西县我们观赏音频,里头有许多技术细节坚信我们会有斩获。
Vite 的读法问题有关 Vite 读法的肉体拷打:难道 Vite 采用的是其法文读法,那为何 Vue 不必它的法文读法呢?(约莫原因在于法语读法不太好听吧)。孔布龙告诉我们,译者说是不是读那就是不是读吧。
个人认为 Vue 和 Vite 的文件格式可说是良知了,首先就交待他们英文名字的读法,让全球合作开发人员标准化知觉。再来看 Svelte,不必说读法了,迄今拼法还讲错。
Vite 是甚么孔布龙他们也说,极难一句话叙述确切 Vite 究竟是甚么。主要就其原因可能是它主要就包括两个部份,两个如前所述 ESM 的利用 esbuild 的合作开发伺服器,另两个部份是如前所述 Rollup 的实用性化的装箱器。当然还有许多其他强悍的机能,但是早已超过一句话了。孔布龙说市售最吻合 Vite 的产品是 Parcel,但两者的实现基本原理完全不同。
为何 Vite 在此时此刻出现其本质其原因应该是大部份现代应用程序(除了 IE 11)早已对原生植物 ES 组件全力支持的较好了,而且旧版的 Node 也全力支持 ESM 了。ESM 终于可以在没多久的今后逆天。原生植物的就是香。
起跑 Demo不采用 @vitejs/create-app,从 0 开始创建两个 Vite 工程 demo。
入口文件是 index.htmlVite 是 Opinionated 的划重点,Vite 是 Opinionated 的,音频里多次展示了这块内容。
其实 opinionated 本来是个贬义词,是固执己见的意思,而用在计算机科学领域,又变成了两个绝对的褒义词,号称他们 opinionated 的辅助工具通过约定保证了易用性,又提供了实用性以保证不会丧失灵活性。Vite 中内置了大量最佳实践的约定,省去了繁琐的实用性,保证后端合作开发人员常用的机能都是开箱即用的。
那么问题来了,列出几个 opinionated 和 unopinionated 的软件。我先来:Opinionated 的有 Vite、Prettier, Unopinionated 的比如 webpack,当然 unopinionated 可不是好词,应该不会有人在官方文件格式里写自己是 unopinionated 的。这段是有关 webpack 的,看元老如何 diss webpack:
Vue CLI 会迁移到 Vite 上吗暂时不会,目前依然是如前所述 webpack 的,但是最终肯定是会迁移到 Vite 上的。
Vite 是框架无关的Vite 提供了定义得非常好的 JavaScript API,可以在更高层级采用,比如 VitePress,它是 VuePress 的孪生兄弟,如前所述 Vite 构筑。
Tailwind CSS + Vite 实战孔布龙新浪网编写 Tailwind 代码翻车。
主持人调侃,原来 Evan You 也需要 debug 啊。
Vite + React 实战主持人调侃,我们新浪网围观尤雨溪写 React!
有关 Esbuild —— “快”就两个字Esbuild 是 Vite 为何如此快速的其原因,它比传统 tsc 快 20-30 倍。Vite 用 esbuild 替代 Rollup 进行预装箱,速度也非常快。
这里孔布龙透露了他的工作电脑,搭载 M1 芯片的 ARM 架构的 Mac Book Pro,遗憾的是,当时的 esbuild 还不全力支持 ARM 架构,但 Go 的最旧版早已全力支持。没想到过了几天,esbuild 就发布了其全力支持 M1 芯片的版本,孔布龙在第一时间做了测试:
DX 是啥在音频翻译过程中,听到孔布龙说了 DX 一词,由于不知道是甚么含义,反反复复听了好多遍,后来 Google 发现,原来 DX 是 Developer Experience 的意思,看来关爱合作开发人员是有官方术语的,有关 DX 的解释可以参考 What Is DX? (Developer Experience)。
Vite 利用其快速的特性,极大提升了合作开发人员的体验,孔布龙直言,他就像被宠坏了的孩子,项目启动超过 1 秒,他就极难忍受了。
有关 SSRSSR 目前还处于实验阶段
有关 HMRVite 真正解决了 HMR 速度与随着应用越来越大而越来越慢的问题。
为啥生产模式不必 esbuild,不是更快吗?其实也想用,但是 esbuild 目前对生产包全力支持不够健壮,许多实用性无法通过 esbuild 实现。所以目前而言,Rollup 是两个好选择,虽然远比 esbuild 慢。
另外,可以用 esbuild 作为压缩器,替代 terser,详见 build.minify,这样会更快,但是包的体积可能会有 5% – 10% 左右的增长,看用户取舍。
译者:@清秋 原文:https://juejin.cn/post/6937176680251424775
如果觉得这篇文章还不错,来个【分享、点赞、在看】三连吧,让更多的人也看到~
点个『在看』全力支持下