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

或如 MDN 所說(shuō)的

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

什麼是樹(shù)搖動(dòng)？

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

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

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

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

Tree Shaking 在 React 中如何運(yùn)作？

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

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

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

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

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

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

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

在 React 中啟用 Tree Shaking 的最佳實(shí)踐：

1.使用ES模組（ESM）：

當(dāng)您的程式碼和使用的函式庫(kù)是用 ESM 編寫(xiě)時(shí)，Tree Shaking 效果最佳。如果可能，請(qǐng)避免使用 CommonJS，因?yàn)樗恢г畼?shù)搖動(dòng)。

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

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

3.消除副作用：

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

4. 配置您的捆綁器：

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

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

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

範(fàn)例：

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

分析與測(cè)試 Tree Shaking 的工具：

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

需要採(cǎi)取的想法：

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

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

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