前端打包工具 Webpack v.s. Vite

功能與目的

打包工具的主要目的是整合模組與資源，將代碼編譯為瀏覽器可理解的語法，並進行優化，使部署更加便利。

為什麼需要打包工具？

模組化支持不足

ES6 前，JavaScript 缺乏標準化的模組系統。打包工具通過支持多種模組格式，解決了相容性問題。

瀏覽器相容性

將不被舊版瀏覽器支持的新技術（ex. ES6）轉譯為可執行的代碼。

效率提升

• 壓縮檔案與優化代碼，減少大小與請求數量。
• 支持分割代碼（Code Splitting），實現按需載入（Lazy Loading），加快頁面加載速度。

開發便利

• 熱模組替換（HMR）：即時預覽代碼修改。
• 自動處理非 JS 資源 ex. CSS、圖片

Webpack（傳統打包工具）

適用場景

適合大型應用程式，功能全面且穩定性高。

主要功能

• 模組打包：支持多種模組格式 ex. ESM、CommonJS，處理 CSS、圖片等資源。
• 相依圖（Dependency Graph）：分析模組依賴關係，建構完整相依圖，確保正確的載入順序。
• Code Splitting：按需載入代碼。
• WebAssembly 支持：適合高性能運算場景。

缺點

• 打包速度較慢，配置較複雜。
• 對於簡單應用，完整打包流程可能顯得多餘，因為現代瀏覽器已原生支持 ECMAScript Modules（ESM）。

Vite（新興工具，專注開發體驗）

適用場景

適合輕量應用和開發階段，體驗更佳。

特點與改進

• 原生 ESM 載入：僅支持 ESM，捨棄舊模組格式 ex. CommonJS，直接利用瀏覽器能力。
• 依賴預打包（Pre-bundling）：使用基於 Go 的工具 ex. esbuild，速度比傳統打包提升 10-100 倍。
• 高效 HMR：基於 ESM 的模組更新避免整頁刷新。
• 進階功能：
  • 支援 TypeScript（語法轉譯）。
  • 自動處理裸模組導入，優化解析速度。
  • 支持 CSS Modules、PostCSS、SASS 等工具。

Webpack v.s. Vite