Vite 紀錄片心得 — 挑戰現狀是創新的開始

這週 JavaScript 社群中最熱門的建構工具 Vite，推出了紀錄片。還不熟這工具的讀者，可以參考先前我們寫的《Vite 是什麼? 為什麼要用 Vite? 它解決了哪些問題? 又是如何解決?》一文。

該紀錄片從歷史梳理的角度，帶著觀眾走過當初 Vite 如何從一個想法，逐步演進成 JavaScript 社群不分框架都使用、全球每週下載量最高的建構工具。以下讓我們

JavaScript 生態系的演進

假如有經歷過早些年的網頁開發，大概都有印象 JavaScript 這個僅在短短 10 天內被寫出來的程式語言，在過去一直被視為「有缺陷」的語言，在早年也不被當一回事，大概就是用來寫點簡單網頁互動用而已。

但隨著瀏覽器越來越強大，開發者在瀏覽器上用 JavaScript 做的事越複雜，也讓前端開發逐漸演變成一個不一樣的世界。當時要把 JavaScript 程式碼傳到瀏覽器端，會用 Grunt、Gulp 這樣的工具，把程式碼壓縮等環節串成一條流程，但是隨著要處理的事情越多，這個流程越變越混亂。

當時社群出現了 Webpack 這個救星。Webpack 是個打包工具，把所有要送到前端的 HTML、CSS、JavaScript 或靜態資源（圖片等），都一併打包處理。因為 Webpack 很好用，所以逐漸成為社群最熱門的選擇。

然而，隨著前端的專案變得越來越大，Webpack 的問題也隨之浮現。舉例來說，大型專案的啟動變得很慢，以熱模組更新（HMR）來說，每次按下儲存都得等很久。而且很多打包工作其實不是每次都需要，導致原本為了效能而導入的打包流程，最後變成一種必要之惡。開發伺服器重啟久到可以去倒杯咖啡聊兩句，回來後還得繼續等。

挑戰現狀是創新的開始

Vite 的作者 Evan You 早年的代表作 Vue 的官方 Vue CLI，原本也是基於 Webpack，主要因為 Webpack 提供了的熱模組更新功能。但隨著 Vue 專案變大，HMR 的效能逐步惡化。Evan 看到社群中開發者們的抱怨，而多數 Vue 開發者最糟的開發體驗問題根源就是 Webpack。

這讓 Evan 開始反思「對開發伺服器來說，為什麼程式碼改動後一定要每次都重頭打包？」而正是因為這個挑戰現狀的想法，讓 Vite 孕育而生。

在最開始，Vite 還不叫 Vite，而是叫 Vue Dev Server，因為 Evan You 想要建構一個讓 Vue 能用的更快的開發伺服器。Vue Dev Server 的第一版原型，是利用原生的 ES Modules，讓模組直接替換，所以熱模組更新就不需要重新打包整個應用。

在有了這個想法後，Evan You 在當天一路實作到半夜，把第一版原型寫出來。而第一版的原型把原本要跑 5 分鐘的熱模組更新加速到 100 毫秒，速度提升了 50 倍。因為實在太快，Evan You 把原本叫 Vue Dev Server 的這個原型改稱為 Vite（備註：Vite 是法文的「快」，所以發音不是 vai-tuh，而是 vee-tuh）。

通用化是普及的開始

由於 Evan You 早些年主要專注在 Vue 的開發，所以當 Vite 推出後，在 Vue 以外的前端社群並沒有太重視。在那時，社群中有另一個同樣試圖解決 Webpack 問題的工具 Snowpack，是社群中多數人關注的焦點。

不過在 Vite 推出沒多久，Svelte 社群的人開始嘗試用 Vite。當時因為 Svelte 作者開發的 Rollup 同樣跑很慢，所以有位叫 Rixo 的開發者試著把 Vite 整合到 Svelte 來加速，結果效果出奇地好，這讓 Svelte 社群也開始關注 Vite。

這個轉變也讓 Vite 逐漸脫離「只是 Vue 的工具」的形象。

不過，讓 Vite 真正成為通用的關鍵，在於 Vite 的架構設計上，選擇了完全兼容 Rollup 的插件介面設計，與此同時以輕量為基底，插件系統為延伸，避免犯下 Webpack 過於難設定的錯誤。

這個架構設計看起來簡單好理解，但在當時 Vite 團隊為了實現這個架構，必須全面重寫 Vite。雖然重寫是個艱難的決定，但回過頭看，這是個再正確不過的決定。

因為這個架構設計，Vite 做到開箱即用，不需要複雜的配置，不需要把半天一天時間花在 Webpack 設定上；開發者只需要安裝 Vite、寫個幾行左右的設定，然後就能使用。正是因為如此簡單，讓 Vite 能輕易被用在不同的框架與工具中，讓 Vite 得以如此普及。

Vite 的通用化與普及，間接地促使前端社群的氛圍轉變。過去許多工具與框架彼此是以競爭的角度在互動；但是現在幾乎什麼工具與框架（Nuxt 3、Qwik、Laravel、SvelteKit、Storybook、SolidStart、Shopify Hydrogen 等等），底層都是使用 Vite。過去在各自的技術會議上王不見王，但在第一屆的 Vite Conf 中，這些過去的競爭對手卻齊聚一堂，這樣的轉變在過去是難以想像的。

脫離用愛發電是永續的開始

在觀看這個紀錄片時，有一段篇幅不長，但是我們覺得非常關鍵的點，那就是 Vite 的永續開發。Vite 之所以能夠在短短幾年，成功取代 Webpack，是因為有一群人穩定不懈地貢獻其中。而這些人之所以能夠不用擔心經濟，甚至以全職的方式投入，是因為他們能跳脫單純的用愛發電貢獻法。

Evan You 本身因為過去開發 Vue 所以本身有穩定的經濟來源，然而假如其他的貢獻者只能用下班與週末投入，Vite 的發展不會如此快速。在紀錄片中可以看到，Vite 的核心團隊獲得 StackBlitz、NuxtLabs 等公司的財務支持，這些公司讓員工能夠全職投入貢獻 Vite，對於 Vite 的發展來說非常關鍵。

過去看過非常多開源專案，原本聲勢看漲，但後繼無力，不少是因為主要貢獻者沒辦法持續大量時間投入。反之，有些能長期持續更新的開源專案，背後多半是基於有穩定的財務支持。

財務的支持不必然是營利的，核心的關鍵在於讓貢獻者不會因為要支持自己生活所需，所以不能把時間花在貢獻上。舉例來說，著名的 Zig 背後的 Zig Software Foundation 即是非營利組織（換句話說，所有的資金都是用在支持貢獻者，而不會把賺來的錢回饋給投資人）。

以我們自己做 ExplainThis 的經驗，當初開啟 E+ 這個專案（連結），核心目的之一也是為了有永續的模式；因為有 E+ 的存在，讓 ExplainThis 在過去兩年能夠穩定且持續產出內容。

小結

以上三個點「挑戰現狀」、「通用化設計」，以及「永續模式」，是我們看完 Vite 紀錄片後，覺得收穫最多的觀點。該紀錄片拍得非常精彩，因此推薦讀者們有時間的話，務必不要錯過了。