# Vite 原始碼解讀 > 今年的 iTHome 鐵人賽我挑選的主題之一，是應該沒辦法用來開課賺錢的「Vite 原始碼解讀... Published: 2023-10-16 URL: https://kaochenlong.com/vite-source-code --- 今年的 [iTHome 鐵人賽](https://ithelp.ithome.com.tw/users/20065770/ironman/6302)我挑選的主題之一，是應該沒辦法用來開課賺錢的「Vite 原始碼解讀」。 選擇這個題目的原因是今年八月份我在 [{LaravelxVue} Conf](https://laravelconf.tw/) 研討會上分享的主題「被 Vue 框架所耽誤的建置工具：Vite」，可惜只有短短的 40 分鐘的時間，沒辦法介紹太細節的內容。所以我決定在這次鐵人賽活動，30 天分期付款地慢慢跟大家一起研究 Vite 的原始碼，看看能不能發現什麼有趣的東西。 我大部分時間都是在 Ruby/Rails 的專案，但 Rails 每一代的前端打包策略都在不斷調整，從早期的 Assets Pipeline 到 Webpack，再到 Rails 7 的 Importmap。對於前端生態，每種全棧型的網站框架都有自己的做法，但似乎沒有真正完美的整合方式。直到我聽說了 Vite，最初我以為它只是 Vue 的附屬品，但後來發現它可以適用於各種 JavaScript 專案，甚至是隔壁棚的 React。這讓我對 Vite 產生了更大的興趣。 不同於傳統的打包工具，Vite 不需要在開發階段就打包所有資源，而是根據需要動態載入，難怪速度可以那麼快。Vite 也巧妙地將打包的工作分給了 [esbuild](https://esbuild.github.io/) 和 [Rollup](https://rollupjs.org/) 這兩個優秀的工具，Vite 自身則充當開發伺服器的角色做它該做的事。 影片從 `npm run dev` 指令發生什麼事開始看，接著是 middleware 的介紹，然後花了不少時間在介紹 Pre-Bundling，後續還有 Module Graph、Plugin 跟 HMR 的介紹，最後花了一點點時間動手作了個功能超弱的陽春復刻版的 Vite - [Vivvi](https://github.com/kaochenlong/vivvi) 影片播放清單 <https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDICcanFF> 翻原始碼其實好處挺多的，除了能鍛鍊自己的程式能力外，還能看看前端的生態圈或是有哪些有趣的套件，重點是我在研究原始碼的過程看到一些不必要的程式碼，趁機賺了一次 [PR](https://github.com/vitejs/vite/pull/14557)。 一開始我還以為中間會因為工作或其它因素斷賽，沒想到竟然完賽了！這回一邊拍影片，一邊在修正我的 OBS 設定跟流程，所以過程中會發現我可能會換版型或換背景底圖，其實都是在做一些實驗。算了一下，這 30 天的影片總時數是 8 小時 22 分又 9 秒，我也順手把這 30 天的影片整理成[播放清單](https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDICcanFF)，有需要的朋友請自行取用，喜歡我的影片的話也別忘了順手訂閱一下喔 :)