下一代前端構(gòu)建工具 Vite （中英雙語字幕）

作者：Ivocin

原文鏈接：https://juejin.cn/post/6937176680251424775

關(guān)于 Vite，來看看作者本人怎么說。本視頻是 Vue 以及 Vite 作者 尤雨溪 在 2021 年 2 月 12 日在 Twitch 上做客 GitHub Open Source Friday 節(jié)目的直播視頻。在視頻里有尤大關(guān)于 Vite 的各項(xiàng)功能的詳細(xì)闡述、大神在線編碼、在線 Debug、大佬 diss webpack 以及對(duì) Vite 的哲學(xué)思考。本視頻很長(zhǎng)，接近 70 分鐘，下面是視頻摘錄，大家可以選擇自己感興趣的點(diǎn)自行傳送。強(qiáng)烈建議大家觀看視頻，里面有很多細(xì)節(jié)相信大家會(huì)有收獲。視頻地址：【譯】下一代前端工具 ViteJS 中英雙語字幕 - Open Source Friday

Vite 的發(fā)音問題

視頻傳送 - 1:18

有關(guān) Vite 發(fā)音的靈魂拷問：既然 Vite 使用的是其法語發(fā)音，那為什么 Vue 不用它的法語發(fā)音呢？（大概是因?yàn)榉ㄕZ讀音不好聽吧）。尤大告訴我們，作者說怎么讀那就怎么讀吧。

個(gè)人認(rèn)為 Vue 和 Vite 的文檔堪稱良心了，首先就交代自己名字的發(fā)音，讓全球開發(fā)者統(tǒng)一認(rèn)知。再來看 Svelte，別說發(fā)音了，至今拼寫還記不住。

Vite 是什么

視頻傳送 - 2:33

尤大自己也說，很難一句話描述清楚 Vite 到底是什么。主要原因可能是它主要包括兩個(gè)部分，一個(gè)基于 ESM 的利用 esbuild 的開發(fā)服務(wù)器，另一個(gè)部分是基于 Rollup 的配置化的打包器。當(dāng)然還有很多其他強(qiáng)大的功能，但是已經(jīng)超過一句話了。尤大說市面上最接近 Vite 的產(chǎn)品是 Parcel，但二者的實(shí)現(xiàn)原理完全不同。

為什么 Vite 在此刻出現(xiàn)

視頻傳送 - 4:53

本質(zhì)原因應(yīng)該是大部分現(xiàn)代瀏覽器（除了 IE 11）已經(jīng)對(duì)原生 ES 模塊支持的很好了，而且新版的 Node 也支持 ESM 了。ESM 終于可以在不久的將來一統(tǒng)江湖。原生的就是香。

起步 Demo

視頻傳送 - 7:05

不使用 @vitejs/create-app，從 0 開始創(chuàng)建一個(gè) Vite 工程 demo。

入口文件是 index.html

視頻傳送 - 14:25

Vite 是 Opinionated 的

視頻傳送 - 17:08

劃重點(diǎn)，Vite 是 Opinionated 的，視頻里多次展示了這塊內(nèi)容。

其實(shí) opinionated 本來是個(gè)貶義詞，是固執(zhí)己見的意思，而用在計(jì)算機(jī)科學(xué)領(lǐng)域，又變成了一個(gè)絕對(duì)的褒義詞，號(hào)稱自己 opinionated 的工具通過約定保證了易用性，又提供了配置以保證不會(huì)喪失靈活性。Vite 中內(nèi)置了大量最佳實(shí)踐的約定，省去了繁瑣的配置，保證前端開發(fā)者常用的功能都是開箱即用的。

關(guān)于 Opinionated 的譯法可以參考 掘金翻譯計(jì)劃的一個(gè) PR，Vite 中文文檔的一個(gè) PR 這兩處的討論。

那么問題來了，列出幾個(gè) opinionated 和 unopinionated 的軟件。我先來：Opinionated 的有 Vite、Prettier, Unopinionated 的比如 webpack，當(dāng)然 unopinionated 可不是好詞，應(yīng)該不會(huì)有人在官方文檔里寫自己是 unopinionated 的。

這段是關(guān)于 webpack 的，看大佬如何 diss webpack：

Vue CLI 會(huì)遷移到 Vite 上嗎

視頻傳送 - 23:56

暫時(shí)不會(huì)，目前依然是基于 webpack 的，但是最終肯定是會(huì)遷移到 Vite 上的。

Vite 是框架無關(guān)的

視頻傳送 - 25:43

Vite 提供了定義得非常好的 JavaScript API，可以在更高層級(jí)使用，比如 VitePress，它是 VuePress 的孿生兄弟，基于 Vite 構(gòu)建。

Tailwind CSS + Vite 實(shí)戰(zhàn)

視頻傳送 - 27:07

尤大在線編寫 Tailwind 代碼翻車。

主持人調(diào)侃，原來 Evan You 也需要 debug 啊。

Vite + React 實(shí)戰(zhàn)

視頻傳送 - 35:30

主持人調(diào)侃，我們?cè)诰€圍觀尤雨溪寫 React！

關(guān)于 Esbuild —— “快”就一個(gè)字

視頻傳送 - 38:24

Esbuild 是 Vite 為何如此快速的原因，它比傳統(tǒng) tsc 快 20-30 倍。Vite 用 esbuild 替代 Rollup 進(jìn)行預(yù)打包，速度也非常快。

這里尤大透露了他的工作電腦，搭載 M1 芯片的 ARM 架構(gòu)的 Mac Book Pro，遺憾的是，當(dāng)時(shí)的 esbuild 還不支持 ARM 架構(gòu)，但 Go 的最新版已經(jīng)支持。沒想到過了幾天，esbuild 就發(fā)布了其支持 M1 芯片的版本，尤大在第一時(shí)間做了測(cè)試：

DX 是啥

視頻傳送 - 47:36

在視頻翻譯過程中，聽到尤大說了 DX 一詞，由于不知道是什么含義，反反復(fù)復(fù)聽了好多遍，后來 Google 發(fā)現(xiàn)，原來 DX 是 Developer Experience 的意思，看來關(guān)愛開發(fā)者是有官方術(shù)語的，關(guān)于 DX 的解釋可以參考 What Is DX? (Developer Experience)。

Vite 利用其快速的特性，極大提升了開發(fā)者的體驗(yàn)，尤大直言，他就像被寵壞了的孩子，項(xiàng)目啟動(dòng)超過 1 秒，他就很難忍受了。

關(guān)于 SSR

視頻傳送 - 52:20

SSR 目前還處于實(shí)驗(yàn)階段，詳見官網(wǎng)文檔。

關(guān)于 HMR

視頻傳送 - 57:59

Vite 真正解決了 HMR 速度與隨著應(yīng)用越來越大而越來越慢的問題。

為啥生產(chǎn)模式不用 esbuild，不是更快嗎？

視頻傳送 - 65:31

其實(shí)也想用，但是 esbuild 目前對(duì)生產(chǎn)包支持不夠健壯，很多配置無法通過 esbuild 實(shí)現(xiàn)。所以目前而言，Rollup 是一個(gè)好選擇，雖然遠(yuǎn)比 esbuild 慢。

另外，可以用 esbuild 作為壓縮器，替代 terser，詳見 build.minify,這樣會(huì)更快，但是包的體積可能會(huì)有 5% - 10% 左右的增長(zhǎng)，看用戶取舍。

后記

好久沒有做這么大型視頻的翻譯了，上一次還是 React Conf 2018 的翻譯。本視頻翻譯從春節(jié)假期 2 月 15 日開始，開工后時(shí)間比較少，斷斷續(xù)續(xù)花了三周多時(shí)間。好在 GitHub 在 Twitch 視頻失效后，視頻上傳到了 YouTube 上，利用其自動(dòng)字幕功能，后期節(jié)省了很多時(shí)間。確實(shí) YouTube 的語音轉(zhuǎn)文字功能更為強(qiáng)大。如果發(fā)現(xiàn)字幕存在問題，歡迎在視頻評(píng)論區(qū)留言。希望這個(gè)視頻能夠幫助到大家。