Vite 原始碼解讀

今年的 iTHome 鐵人賽我挑選的主題之一，是應該沒辦法用來開課賺錢的「Vite 原始碼解讀」。

選擇這個題目的原因是今年八月份我在 {LaravelxVue} Conf 研討會上分享的主題「被 Vue 框架所耽誤的建置工具：Vite」，可惜只有短短的 40 分鐘的時間，沒辦法介紹太細節的內容。所以我決定在這次鐵人賽活動，30 天分期付款地慢慢跟大家一起研究 Vite 的原始碼，看看能不能發現什麼有趣的東西。

我大部分時間都是在 Ruby/Rails 的專案，但 Rails 每一代的前端打包策略都在不斷調整，從早期的 Assets Pipeline 到 Webpack，再到 Rails 7 的 Importmap。對於前端生態，每種全棧型的網站框架都有自己的做法，但似乎沒有真正完美的整合方式。直到我聽說了 Vite，最初我以為它只是 Vue 的附屬品，但後來發現它可以適用於各種 JavaScript 專案，甚至是隔壁棚的 React。這讓我對 Vite 產生了更大的興趣。

不同於傳統的打包工具，Vite 不需要在開發階段就打包所有資源，而是根據需要動態載入，難怪速度可以那麼快。Vite 也巧妙地將打包的工作分給了 esbuild 和 Rollup 這兩個優秀的工具，Vite 自身則充當開發伺服器的角色做它該做的事。

影片從 npm run dev 指令發生什麼事開始看，接著是 middleware 的介紹，然後花了不少時間在介紹 Pre-Bundling，後續還有 Module Graph、Plugin 跟 HMR 的介紹，最後花了一點點時間動手作了個功能超弱的陽春復刻版的 Vite - Vivvi

影片播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDICcanFF

翻原始碼其實好處挺多的，除了能鍛鍊自己的程式能力外，還能看看前端的生態圈或是有哪些有趣的套件，重點是我在研究原始碼的過程看到一些不必要的程式碼，趁機賺了一次 PR。

一開始我還以為中間會因為工作或其它因素斷賽，沒想到竟然完賽了！這回一邊拍影片，一邊在修正我的 OBS 設定跟流程，所以過程中會發現我可能會換版型或換背景底圖，其實都是在做一些實驗。算了一下，這 30 天的影片總時數是 8 小時 22 分又 9 秒，我也順手把這 30 天的影片整理成播放清單，有需要的朋友請自行取用，喜歡我的影片的話也別忘了順手訂閱一下喔 :)