外部函式庫：外部函式庫的隱藏重量

作為開發人員，我們經常依賴外部鉤子庫來節省時間，利用經過充分測試的解決方案，並專注於專案的大局。然而，考慮這些函式庫對捆綁包大小的影響至關重要，這是影響應用程式效能和載入速度的關鍵因素。讓我們探討一下這些函式庫如何影響套件大小，如何檢查是否支援 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，要么需要進一步配置（例如將某些程式碼標記為無副作用）。

5. 使用捆綁分析器

使用 Webpack Bundle Analyzer 或 Rollup 的內建分析器等工具來視覺化最終的套件。

• 在輸出中找出庫的大小。如果 tree-shaking 有效，則應排除未使用的程式碼，並且最終大小應更小。

6. 檢查社區和問題

查看庫儲存庫（例如 GitHub）中的問題或討論，看看是否有任何提及 tree-shaking 或與之相關的問題。維護者還可以提供啟用 tree-shaking 的指導。

7. 尋找具體的構建說明

有些函式庫可能有啟用樹搖動的具體說明，特別是當它們預設不完全可樹搖晃時。檢查有關如何配置捆綁器以實現最佳樹搖動的任何指南。

範例：

如果您使用像 Lodash 這樣的函式庫，它具有特定的「模組化」導入：

這允許像Webpack 這樣的打包器在使用Lodash 的模組化導入時擺脫未使用的方法，而不是導入整個庫（import _ from 'lodash'），這將包括整個代碼庫並防止tree-shaking 。

以上是外部函式庫：外部函式庫的隱藏重量的詳細內容。更多資訊請關注PHP中文網其他相關文章！