作為開發(fā)人員，我們經(jīng)常依賴外部鉤子庫來節(jié)省時間，利用經(jīng)過充分測試的解決方案，并專注于項目的大局。然而，考慮這些庫對捆綁包大小的影響至關(guān)重要，這是影響應(yīng)用程序性能和加載速度的關(guān)鍵因素。讓我們探討一下這些庫如何影響包大小，如何檢查是否支持 tree-shaking，以及如何做出明智的決策。

---

為什么捆綁尺寸很重要

• 用戶體驗：較大的包需要更長的時間來下載、解析和執(zhí)行，尤其是在較慢的網(wǎng)絡(luò)或設(shè)備上。
• SEO 和性能分?jǐn)?shù)：Google Lighthouse 等工具會懲罰大量捆綁，從而影響您的搜索排名。
• 長期維護(hù)：隨著項目的增長，較大的捆綁包可能會掩蓋性能瓶頸。

---

外部 Hook 庫：便利與成本

鉤子庫是處理復(fù)雜狀態(tài)或可重用模式的常見解決方案，但它們的捆綁成本取決于其結(jié)構(gòu)：

顆粒狀（模塊化）

• 僅安裝您需要的掛鉤，最大限度地減少依賴關(guān)系。
• 示例：

  import { useDebounce } from "hook-lib/useDebounce";

整體式（可搖樹）

• 安裝一個庫，但確保您的構(gòu)建工具刪除未使用的導(dǎo)出。
• 示例：

  import { useDebounce } from "hook-lib";

每種方法都有權(quán)衡。粒度庫可以精確控制添加的內(nèi)容，而整體庫更容易管理，但需要適當(dāng)?shù)臉鋼u動以避免膨脹。

Hook 庫增加了多少權(quán)重？

重量取決于：

• 庫大小：有些庫是輕量級的（幾 KB），而另一些庫如果依賴依賴項，可能會膨脹到幾十 KB。
• Tree-Shaking 有效性：如果庫不支持 tree-shaking，您可能會導(dǎo)入未使用的代碼。
• 用法：導(dǎo)入單個鉤子可能會引入共享實用程序或polyfill，從而擴(kuò)大大小。

示例場景：

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

如何檢查庫是否支持 Tree-Shaking

要檢查庫是否支持 tree-shaking，您可以在了解其代碼結(jié)構(gòu)及其捆綁方式的基礎(chǔ)上采用多種方法。 Tree-shaking 是 Webpack 和 Rollup 等現(xiàn)代 JavaScript 捆綁器支持的一項功能，它會在構(gòu)建過程中刪除未使用的代碼。以下是確定庫是否支持它的方法：

1.查看庫的包文檔

• 尋找 ES 模塊 (ESM) 支持：為了使 tree-shaking 工作，庫必須使用 ES 模塊 (ESM)。 ESM 允許捆綁器分析導(dǎo)入/導(dǎo)出結(jié)構(gòu)并安全地消除未使用的代碼。
  • 檢查庫是否提供 ESM 構(gòu)建（通常在其 package.json 的模塊或?qū)С鲎侄沃兄付ǎ?/li>
  • 搜索文檔或存儲庫以查看 ESM 是否被提及為首選用法。

2.檢查Library的package.json

• 導(dǎo)出字段：對于更新的軟件包，檢查是否使用了導(dǎo)出字段。這可以為不同的環(huán)境（如 CommonJS 或 ESM）指定不同的入口點，從而改進(jìn)對 tree-shaking 的支持。
• Module Field：查看庫的package.json文件。如果它包含指向 ESM 構(gòu)建的模塊字段，則表明該庫與 tree-shaking 兼容。例子：

  import { useDebounce } from "hook-lib/useDebounce";

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

3.檢查庫的源代碼

• 導(dǎo)入/導(dǎo)出的使用：確保庫使用 ES 模塊語法（例如導(dǎo)入和導(dǎo)出）。 Tree-shaking 使用這種語法效果最好。

  • 如果庫使用 CommonJS（require、module.exports），tree-shaking 將不會那么有效。

• 無副作用： 支持 tree-shaking 的庫通常會避免代碼中的副作用。檢查庫的源代碼以確保函數(shù)或模塊在導(dǎo)入時不會執(zhí)行操作。例如，導(dǎo)入模塊不應(yīng)改變?nèi)譅顟B(tài)。

4. 使用 Bundler 來測試 Tree-Shaking

• 您可以使用現(xiàn)代 JavaScript 捆綁器（如 Webpack 或 Rollup）來測試 tree-shaking 是否有效。這是一個簡單的測試：
  • 創(chuàng)建一個安裝了庫的最小項目。
  • 僅導(dǎo)入代碼中庫的一部分（例如，單個函數(shù)）。
  • 運行捆綁器并檢查輸出：
  • a) 如果未使用的代碼被排除在最終包之外，則該庫支持 tree-shaking。
  • b) 如果仍然包含未使用的代碼，則該庫要么不支持 tree-shaking，要么需要進(jìn)一步配置（例如將某些代碼標(biāo)記為無副作用）。

5. 使用捆綁分析器

使用 Webpack Bundle Analyzer 或 Rollup 的內(nèi)置分析器等工具來可視化最終的包。

• 在輸出中查找?guī)斓拇笮?。如?tree-shaking 有效，則應(yīng)排除未使用的代碼，并且最終大小應(yīng)更小。

6. 檢查社區(qū)和問題

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

7. 尋找具體的構(gòu)建說明

一些庫可能有啟用樹搖動的具體說明，特別是當(dāng)它們默認(rèn)情況下不完全可樹搖動時。檢查有關(guān)如何配置捆綁器以實現(xiàn)最佳樹搖動的任何指南。

示例：

如果您使用像 Lodash 這樣的庫，它具有特定的“模塊化”導(dǎo)入：

  import { useDebounce } from "hook-lib/useDebounce";

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

以上是外部庫：外部庫的隱藏重量的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！