探索網頁前端工具的前世今生

前導知識

• 什麼是 web bundler?

JS 模組化

• JavaScript 模組化 (附上參考學習資源)
• 在 CommonJS 前未被提及的歷史
• CommonJS 與 Node.js 的 server side 模組化開端
• Client Side 模組化的百家爭鳴
• NPM、Browserify、Webpack、ESM

現代工具

• 現代 bundler、build tool 簡介 (Vite、esbuild、Rspack、Rolldown、Turbopack)
• 什麼是 Oxc？什麼是 void(0)？

Vite 實驗與原始碼

• 介紹
  • 為什麼 Vite 的冷啟動可以這麼快？ (附上參考學習資源)
• 實驗
  • 用實驗來理解 Vite 的 dependency pre-bundling 是什麼
  • 來做個實驗 - 壓測 Vite 的效能瓶頸
  • esbuild 是什麼？code splitting 是什麼？來做個實驗玩玩看
• 追原始碼
  • 來試著追一下 Vite 原始碼 (1) - 從 npm run dev 到 createServer
  • 來試著追一下 Vite 原始碼 (2) - Chokidar、pre-bundling 初探
  • 來試著追一下 Vite 原始碼 (3) - pre-bundling 怎麼做套件分析
  • 來試著追一下 Vite 原始碼 (4) - pre-bundling 最終章
• 總結
  • Vite 系列總整理

Rspack 實驗

• Rspack / Rsbuild / Rsdoctor 入門
• 來實驗看看 Next.js、Remix 專案遷移到 Rspack 可行嗎？

🚧 本系列文章因為都是以 2024 當下最新資訊為主，隨著工具開發進展可能有過時的問題，若有任何問題歡迎留言或私訊 IG 詢問，感謝您的回報！

系列起源

這系列文章是參加 2024 iThome 鐵人賽 時撰寫的，這是一個需要連續 30 天發表技術文章的比賽。

雖然說這個系列的主題當初取名為 《Rust 的戰國時代：探索網頁前端工具的前世今生》，但嚴格說起來我覺得前後算是可以拆開講的兩個主題，比較理想上是可以在具備 Rust 開發能力後，直接切入如何用 Rust 來開發前端工具這件事，但一方面也是因為我是參賽時才開始初學 Rust，所以最後變成前面在探討關於網頁前端工具發展史與原理，以及最後的為什麼這些工具要被 Rust 化，來入門了解一下 Rust 吧。

因為當初參賽時是無存稿，採用研究到哪寫到哪的方式，所以完賽後回頭重新編排一下這整個系列文到部落格中，並將其拆為兩部分，Rust 相關會收錄在 Rust 學習筆記這個系列中。