Vue3.0 PK React17 ，誰勝?點擊上方“藍色字體”，選擇“設爲星標”
作者：清秋
https://juejin.cn/post/6937176680251424775
關於 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.html
Vite 是 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 秒，他就很難忍受了。
關於 SSR
SSR 目前還處於實驗階段
關於 HMR
Vite 真正解決了 HMR 速度與隨着應用越來越大而越來越慢的問題。
爲啥生產模式不用 esbuild，不是更快嗎？
其實也想用，但是 esbuild 目前對生產包支持不夠健壯，很多配置無法通過 esbuild 實現。所以目前而言，Rollup 是一個好選擇，雖然遠比 esbuild 慢。
另外，可以用 esbuild 作爲壓縮器，替代 terser，詳見 build.minify,這樣會更快，但是包的體積可能會有 5% - 10% 左右的增長，看用戶取捨。
編後
由 笑妄²º²¹ 大佬主導，羣友共同貢獻整理
點擊關注下方卡片👇，在後臺回覆關鍵詞 5000
如果覺得這篇文章還不錯，來個【分享、點贊、在看】三連吧，讓更多的人也看到~
本文分享自微信公衆號 - 前端佈道師（honeyBadger8）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。