簡單聊聊本系列文的選題動機，以及預計的開展方向。期待能由淺入深剖析各種 bundler、build tool 如 Webpack、Vite (Rollup/Rolldown)、esbuild、Rspack、Turbopack 等工具的特性與優缺點，並通過實際弄髒手做實驗的方式來理解它們的運作原理與實戰技巧。

(Photo by Jr Korpa)

關於主題

嗨，大家好，最後還是想不開來參加 IT 鐵人賽了。

第一篇不免俗讓我廢話一下聊聊選題動機，關於主題其實幾個月前有各種想法：

• 網頁前端系統設計
• 你就是那條龍：做一個全端健身紀錄 App
• 那些我曾想搞懂的網頁開發知識大補帖

這三個主題寫起來應該都蠻有趣的，其實前兩個對我來說是更能掌握的主題，但最後卻是在昨天洗澡時突然有個靈感，不如就來研究第三個主題中的 bundler 好了，如果研究有成可能有機會完成「向某個 Rust-based bundler 發 PR」這樣遠大的目標。

會想寫這個主題是因為近幾年看到許多前端工具都從 Javascript/TypeScript 被 Rust 化，而今年初時其實曾寫過一個關於 Tree shaking 的系列文，其中有個缺憾是草稿與筆記中一直有一塊想來寫寫近代 bundler 的研究，但沒想到這個 WIP 就像是程式碼中的 TODO 一樣，大多如果你 git blame 下去可能都是好幾年前的 commit，空有想法不執行最後終究只是觀眾，不如就趁今年鐵人賽的機會來推進一下。

另外上個月剛好也看到 Rspack 1.0 正式發佈的消息，一直知道這是個由 ByteDance Infra team 開發的 Rust-based bundler，仔細一看才發現原來它其中一個特性是能做到兼容 Webpack，好像也蠻值得來實際研究看看的，如果有機會幫到目前團隊或正打算做大型專案中的 Webpack 遷移的開發者們實是好事一件。

系列文架構

然後因為是臨時起意參賽，沒有存稿所以大綱最後才會彙整起來，但大方向先不負責任預測大概會是：

• web bundler 簡介
  • 什麼是 bundler 及為何需要用
  • 簡介各款 bundler、build tool 特性
  • 從 Webpack 理解各種 bundler 特性與用途
  • bundler vs build tool
• 深入用實驗理解各款 bundler、build tool 的特色與原理
  • HMR 原理
  • Vite 為什麼可以這麼快
  • Vite 實驗
  • Rspack 實驗
  • Turbopack 實驗
  • 何謂 Module Federation
  • bundler 與旁系工具們的原始碼解析
  • 其他工具知識點補充

理想很遠大，但現實是骨感的，沒存稿的狀況下之後忙起來不知道能不能持之以恆，但或許這就是參加鐵人賽之所以有挑戰的一個原因。另外還有個預防針是其實我完全沒寫過任何一行 Rust 程式，說不定中途還會出現一些必須弄懂才能繼續前進的 Rust 學習筆記，但就先且戰且走了，寫一篇是一篇。

這系列因為算是做中學，期待在一些前情提要後，能以弄髒手實際做幾個實驗來學習，若過程中有錯誤再請各位讀者不吝指正，若有興趣也可以訂閱追蹤一起討論！