React 效能：透過 Tree Shaking 提升效能

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

或如 MDN 所說的

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

什麼是樹搖動？

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

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

為什麼 React 開發者應該關心 Tree Shaking？

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

Tree Shaking 在 React 中如何運作？

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

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

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

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

相反，您可以使用命名導入：

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

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

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

1.使用ES模組（ESM）：

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

2. 僅匯入您需要的內容：

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

3.消除副作用：

Tree Shaking 依賴導入模組沒有副作用的假設。 「副作用」可能是任何改變全域狀態、修改變數或在模組本身之外執行程式碼的行為。確保您的模組不會產生可能阻止 Tree Shaking 工作的意外副作用。

4. 配置您的捆綁器：

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

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

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

範例：

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

分析與測試 Tree Shaking 的工具：

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

需要採取的想法：

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

如果您希望提高應用程式的效能，那麼實現 Tree Shaking 是一個很好的起點！

以上是React 效能：透過 Tree Shaking 提升效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！