下一代前端構(gòu)建工具 ViteJS 技術(shù)解讀，尤雨溪diss：Webpack！

（給前端大學(xué)加星標(biāo)，提升前端技能.）

作者：清秋

https://juejin.cn/post/6937176680251424775

關(guān)于 Vite，來(lái)看看作者本人怎么說(shuō)。本視頻是 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 分鐘，下面是視頻摘錄，強(qiáng)烈建議大家觀看視頻，里面有很多細(xì)節(jié)相信大家會(huì)有收獲。

Vite 的發(fā)音問(wèn)題

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

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

Vite 是什么

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

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

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

起步 Demo

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

入口文件是 index.html

Vite 是 Opinionated 的

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

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

那么問(wèn)題來(lái)了，列出幾個(gè) opinionated 和 unopinionated 的軟件。我先來(lái)：Opinionated 的有 Vite、Prettier, Unopinionated 的比如 webpack，當(dāng)然 unopinionated 可不是好詞，應(yīng)該不會(huì)有人在官方文檔里寫(xiě)自己是 unopinionated 的。這段是關(guān)于 webpack 的，看大佬如何 diss webpack：

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

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

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

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

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

尤大在線編寫(xiě) Tailwind 代碼翻車。

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

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

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

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

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)支持。沒(méi)想到過(guò)了幾天，esbuild 就發(fā)布了其支持 M1 芯片的版本，尤大在第一時(shí)間做了測(cè)試：

DX 是啥

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

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

關(guān)于 SSR

SSR 目前還處于實(shí)驗(yàn)階段

關(guān)于 HMR

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

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

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

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

點(diǎn)贊和在看就是最大的支持??