功能與目的
打包工具的主要目的是整合模組與資源，將代碼編譯為瀏覽器可理解的語法，並進行優化，使部署更加便利。
為什麼需要打包工具？
模組化支持不足
ES6 前，JavaScript 缺乏標準化的模組系統。打包工具通過支持多種模組格式，解決了兼容性問題。
瀏覽器兼容性
將不被舊版瀏覽器支持的新技術（如 ES6）轉譯為可執行的代碼。
效率提升
- 壓縮檔案與優化代碼，減少大小與請求數量。
- 支持分割代碼（Code Splitting），實現按需載入（Lazy Loading），加快頁面加載速度。
開發便利
- 熱模組替換（HMR）：即時預覽代碼修改。
- 自動處理非 JS 資源（如 CSS、圖片）。
Webpack（傳統打包工具）
適用場景
適合大型應用程序，功能全面且穩定性高。
主要功能
- 模組打包：支持多種模組格式（如 ESM、CommonJS），處理 CSS、圖片等資源。
- 相依圖（Dependency Graph）：分析模組依賴關係，構建完整相依圖，確保正確的載入順序。
- Code Splitting：按需載入代碼。
- WebAssembly 支持：適合高性能運算場景。
缺點
- 打包速度較慢，配置較複雜。
- 對於簡單應用，完整打包流程可能顯得多餘，因為現代瀏覽器已原生支持 ECMAScript Modules（ESM）。
Vite（新興工具，專注開發體驗）
適用場景
適合輕量應用和開發階段，體驗更佳。
特點與改進
- 原生 ESM 載入：僅支持 ESM，捨棄舊模組格式（如 CommonJS），直接利用瀏覽器能力。
- 依賴預打包（Pre-bundling）：使用基於 Go 的工具（如 esbuild），速度比傳統打包提升 10-100 倍。
- 高效 HMR：基於 ESM 的模組更新避免整頁刷新。
- 進階功能：
- 支援 TypeScript（語法轉譯）。
- 自動處理裸模組導入，優化解析速度。
- 支持 CSS Modules、PostCSS、SASS 等工具。
Webpack v.s. Vite
| 特性 | Webpack | Vite |
|---|---|---|
| 模組支持 | 多模組格式（ESM、CJS 等） | 原生 ESM |
| 開發模式 | 完整打包 | 動態加載 ESM |
| 打包速度 | 慢（JS 實現） | 快（基於 esbuild） |
| 配置複雜度 | 高 | 低 |
| HMR | 基於打包 | 基於 ESM，效率更高 |
| 適用場景 | 大型應用，穩定性優先 | 開發階段或輕量應用 |
如果你覺得這篇文章對你有幫助，可以請我喝杯奶茶 ❤️
