外部函式庫：外部函式庫的隱藏重量-js教程-PHP中文網

External libraries: The Hidden Weight of External Libraries

作為開發人員，我們經常依賴外部鉤子庫來節省時間，利用經過充分測試的解決方案，並專注於專案的大局。然而，考慮這些函式庫對捆綁包大小的影響至關重要，這是影響應用程式效能和載入速度的關鍵因素。讓我們探討一下這些函式庫如何影響套件大小，如何檢查是否支援 tree-shaking，以及如何做出明智的決策。

為什麼捆綁尺寸很重要

使用者體驗：較大的套件需要更長的時間來下載、解析和執行，尤其是在較慢的網路或裝置上。
SEO 和效能分數：Google Lighthouse 等工具會懲罰大量捆綁，從而影響您的搜尋排名。
長期維護：隨著專案的成長，較大的捆綁包可能會掩蓋效能瓶頸。

外部 Hook 庫：便利與成本

鉤子庫是處理複雜狀態或可重複使用模式的常見解決方案，但它們的捆綁成本取決於其結構：

顆粒狀（模組化）

僅安裝您需要的掛鉤，最大限度地減少依賴關係。
範例：

整體式（可搖樹）

安裝一個庫，但確保您的建置工具刪除未使用的匯出。
範例：

每種方法都有權衡。粒度庫可以精確控制添加的內容，而整體庫更容易管理，但需要適當的樹搖晃以避免膨脹。

Hook 庫增加了多少權重？

重量取決於：

函式庫大小：有些函式庫是輕量級的（幾 KB），而有些函式庫如果依賴依賴項，可能會膨脹到幾十 KB。
Tree-Shaking 有效性：如果函式庫不支援 tree-shaking，您可能會匯入未使用的程式碼。
用法：匯入單一鉤子可能會引入共用實用程式或polyfill，從而擴大大小。

範例場景：

輕量級函式庫（use-fetch-hook）增加了 5KB。
即使您只使用一個鉤子，一個大型的、樹形抖動較差的單體庫也可能會增加 30KB 。

如何檢查函式庫是否支援 Tree-Shaking

要檢查庫是否支援 tree-shaking，您可以在了解其程式碼結構及其捆綁方式的基礎上採用多種方法。 Tree-shaking 是 Webpack 和 Rollup 等現代 JavaScript 捆綁器支援的功能，它會在建置過程中刪除未使用的程式碼。以下是確定庫是否支援它的方法：

1.查看庫的套件文檔

尋找 ES 模組 (ESM) 支援：為了讓 tree-shaking 運作，函式庫必須使用 ES 模組 (ESM)。 ESM 允許捆綁器分析匯入/匯出結構並安全地消除未使用的程式碼。
- 檢查庫是否提供 ESM 建置（通常在其 package.json 的模組或匯出欄位中指定）。
- 搜尋文件或儲存庫以查看 ESM 是否被提及為首選用法。

2.檢查Library的package.json

匯出欄位：對於更新的軟體包，檢查是否使用了匯出欄位。這可以為不同的環境（如 CommonJS 或 ESM）指定不同的入口點，從而改善對 tree-shaking 的支援。
Module Field：查看庫的package.json檔案。如果它包含指向 ESM 建置的模組字段，則表示該庫與 tree-shaking 相容。例子：

模組指向 ESM 版本，該版本是可搖樹的。
main 通常指向 CommonJS 版本，這對 tree-shaking 來說並不理想。

3.檢查庫的源碼

匯入/匯出的使用：確保程式庫使用 ES 模組語法（例如匯入和匯出）。 Tree-shaking 使用這種語法效果最好。
- 如果函式庫使用 CommonJS（require、module.exports），tree-shaking 將不會那麼有效。
無副作用： 支援 tree-shaking 的函式庫通常會避免程式碼中的副作用。檢查庫的原始程式碼以確保函數或模組在導入時不會執行操作。例如，導入模組不應改變全域狀態。

4. 使用 Bundler 來測試 Tree-Shaking

您可以使用現代 JavaScript 捆綁器（如 Webpack 或 Rollup）來測試 tree-shaking 是否有效。這是一個簡單的測試：
- 建立一個安裝了庫的最小項目。
- 僅導入程式碼中庫的一部分（例如，單一函數）。
- 運行捆綁器並檢查輸出：
- a) 如果未使用的程式碼被排除在最終套件之外，則該程式庫支援 tree-shaking。
- b) 如果仍然包含未使用的程式碼，則該程式庫要么不支援 tree-shaking，要么需要進一步配置（例如將某些程式碼標記為無副作用）。