Tree shake 是現(xiàn)代 JavaScript 開發(fā)中的基本技術(shù)，特別是像 React 這樣的函式庫。它有助於從最終捆綁包中消除未使用的程式碼，從而減小檔案大小並提高應(yīng)用程式效能。

或如 MDN 所說的

Tree shake 是 JavaScript 上下文中常用的術(shù)語，用來描述死程式碼的刪除。

什麼是樹搖動？

Tree Shaking 是 JavaScript 捆綁器（如 Webpack 和 Rollup）中使用的術(shù)語，用於描述從最終 JavaScript 捆綁包中刪除未使用的程式碼的過程。它的工作原理是分析程式碼庫中的導(dǎo)入/導(dǎo)出語句，找出實際使用的程式碼部分，並消除其他所有內(nèi)容。

「tree shake」這個名字來自於搖晃一棵樹並讓未使用的樹枝（代碼）掉落的類比，只留下最終構(gòu)建中必要的部分。

為什麼 React 開發(fā)者應(yīng)該關(guān)心 Tree Shaking？

身為 React 開發(fā)人員，減少 JavaScript 套件的大小會對應(yīng)用程式的效能產(chǎn)生重大影響。大捆綁會導(dǎo)致載入時間緩慢和用戶體驗不佳，尤其是在行動網(wǎng)路上。 Tree Shaking 有助於確保最終建置中僅包含您實際使用的程式碼，這可以顯著提高效能。

Tree Shaking 在 React 中如何運作？

Tree Shaking 嚴重依賴 ES 模組 (ESM)。當(dāng)您使用 ESM 語法匯入和匯出模組時，Webpack 和 Rollup 等捆綁器可以分析您的程式碼並刪除未使用的匯出。

例如，假設(shè)您正在使用一個大型實用程式庫，但您只需要一個函數(shù)：

// Bad practice: importing everything
import * as lodash from 'lodash';

在這種情況下，即使您只使用一個函數(shù)，整個 lodash 函式庫也會被捆綁。這效率低下並且會增加您的應(yīng)用程式大小。

相反，您可以使用命名導(dǎo)入：

// Good practice: importing only what you need
import { debounce } from 'lodash';

這樣，您的捆綁包中僅包含 debounce 函數(shù)，而排除了其餘的 lodash 程式碼，從而使您的應(yīng)用程式變得更小。

在 React 中啟用 Tree Shaking 的最佳實踐：

1.使用ES模組（ESM）：

當(dāng)您的程式碼和使用的函式庫是用 ESM 編寫時，Tree Shaking 效果最佳。如果可能，請避免使用 CommonJS，因為它不支援樹搖動。

2. 僅匯入您需要的內(nèi)容：

如上所示，請一律使用命名匯入或匯入特定函數(shù)而不是整個函式庫。

3.消除副作用：

Tree Shaking 依賴導(dǎo)入模組沒有副作用的假設(shè)。 「副作用」可能是任何改變?nèi)驙顟B(tài)、修改變數(shù)或在模組本身之外執(zhí)行程式碼的行為。確保您的模組不會產(chǎn)生可能阻止 Tree Shaking 工作的意外副作用。

4. 配置您的捆綁器：

確保您的捆綁器（如 Webpack 或 Rollup）已正確配置為 Tree Shaking。這通常包括啟用生產(chǎn)模式以實現(xiàn)最佳化。

5.利用package.json「sideEffects」欄位：

如果您正在使用庫，甚至是您自己的項目，請確保在 package.json 中標(biāo)記有副作用的檔案。這有助於捆綁器了解什麼可以安全地進行 tree-shaking。

範(fàn)例：

// Bad practice: importing everything
import * as lodash from 'lodash';

分析與測試 Tree Shaking 的工具：

• Webpack 套件分析器：此工具可協(xié)助您視覺化套件的內(nèi)容並查看是否仍包含任何未使用的程式碼。
• 來源映射：使用來源映射來追蹤最終包中包含的內(nèi)容。

需要採取的想法：

對於想要建立高效、快速應(yīng)用程式的 React（而不僅僅是）開發(fā)人員來說，Tree Shaking 是一項重要的最佳化技術(shù)。透過遵循最佳實踐，例如使用 ES 模組、僅匯入必要的程式碼以及確保模組無副作用，您可以充分利用 Tree Shaking 並顯著提高 React 應(yīng)用程式的效能。

如果您希望提高應(yīng)用程式的效能，那麼實現(xiàn) Tree Shaking 是一個很好的起點！

以上是React 效能：透過 Tree Shaking 提升效能的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！