樹(shù)木搖動(dòng)是一種死亡代碼消除技術(shù)，可從JavaScript捆綁包中刪除未使用的代碼，從而導(dǎo)致較小的文件大小並改善性能。它通過(guò)利用ES6模塊的靜態(tài)結(jié)構(gòu)（導(dǎo)入/導(dǎo)出）來(lái)起作用，從而允許WebPack，Rollup或Vite等捆綁機(jī)在構(gòu)建時(shí)間分析依賴(lài)關(guān)係並消除不需要的代碼。 1。搖動(dòng)僅適用於ES6模塊，而不適用於CONCORJS（require（require（）），因?yàn)閯?dòng)態(tài)導(dǎo)入可以阻止靜態(tài)分析。 2。它與縮小不同，它通過(guò)重命名變量和刪除空格來(lái)減少代碼大小，但不會(huì)刪除未使用的功能或模塊。 3。要啟用有效的樹(shù)木搖動(dòng)，請(qǐng)始終如一地使用ES6語(yǔ)法，更喜歡提供ES模塊版本（例如Lodash-es）的庫(kù)，請(qǐng)避免在僅需要一個(gè)函數(shù)時(shí)導(dǎo)入整個(gè)默認(rèn)對(duì)象，並確保將Bundler設(shè)置為生產(chǎn)模式。 4。在包裝中正確配置“副作用”字段。JSON指示哪些文件具有副作用（例如polyfills或css Imports），從而可以更安全地刪除未使用的代碼。 5。始終使用Bundlephobia.com，Webpack Bundle Analyzer或源地圖爆炸器等工具驗(yàn)證樹(shù)木搖動(dòng)的有效性，因?yàn)樵S多庫(kù)不支持由於非ESM格式或固有的副作用而搖動(dòng)樹(shù)。樹(shù)木搖動(dòng)不是自動(dòng)的，需要正確的設(shè)置，但是如果正確配置，它會(huì)無(wú)縫操作以減少JavaScript有效負(fù)載而無(wú)需更改應(yīng)用程序邏輯。

如果您正在使用現(xiàn)代JavaScript構(gòu)建工具，則您可能聽(tīng)說(shuō)過(guò)樹(shù)木的術(shù)語(yǔ)。從本質(zhì)上講，樹(shù)木搖動(dòng)是消除死亡代碼的一種方法 - 導(dǎo)入但從未實(shí)際使用的JavaScript捆綁包的各個(gè)部分。目標(biāo)？較小的捆綁尺寸，更快的負(fù)載時(shí)間和更好的性能。

這不是魔術(shù)，並且在所有情況下都不會(huì)自動(dòng)起作用。為了真正受益於樹(shù)木的顫抖，您需要了解它的工作原理以及必須滿足的條件才能有效。

什麼實(shí)際是（不是）

樹(shù)木搖動(dòng)是一種在構(gòu)建過(guò)程中使用的消除代碼消除技術(shù)，主要是由WebPack，crolup或vite等捆綁機(jī)。這個(gè)名字來(lái)自“搖動(dòng)”樹(shù)（您的代碼庫(kù)）的想法，使未使用的，死的分支掉下來(lái)。

由於ES6模塊語(yǔ)法（ import / export ），它起作用。與commonjs（ require() ）不同，ES6導(dǎo)入是靜態(tài)的，這意味著可以在構(gòu)建時(shí)間分析導(dǎo)入和導(dǎo)出而不運(yùn)行代碼。這種靜態(tài)結(jié)構(gòu)允許捆綁器確定實(shí)際使用了模塊的哪些部分。

重要的是：樹(shù)木顫抖與縮小不同?？s小縮短可變名稱(chēng)並刪除空格。樹(shù)木搖動(dòng)可去除整個(gè)未使用的代碼。

例如：

 // utils.js
導(dǎo)出const add =（a，b）=> ab;
導(dǎo)出const減去=（a，b）=> a -b;

// main.js
導(dǎo)入{add}從'./utils.js';
console.log（add（2，3））;

在這種情況下，從未進(jìn)口或使用subtract 。啟用樹(shù)木搖動(dòng)，它不會(huì)包含在最後的捆綁包中。

樹(shù)引擎蓋下的樹(shù)木搖動(dòng)

該過(guò)程涉及一些關(guān)鍵步驟：

• 靜態(tài)分析：Bundler掃描您的代碼以映射所有import export 。
• 依賴(lài)圖構(gòu)建：它創(chuàng)建了一個(gè)模塊依賴(lài)於哪個(gè)的圖。
• Mark和Sweep ：它標(biāo)記所有使用的功能，變量或模塊，然後“搖晃”未標(biāo)記（未使用）的功能。

但這是捕獲：搖晃僅在您的代碼和依賴(lài)項(xiàng)使用ES6模塊時(shí)起作用。如果圖書(shū)館使用commonjs（ module.exports ， require() ），則捆綁器無(wú)法靜態(tài)分析它，因此樹(shù)木搖會(huì)失敗。

例如，如果您從commonjs模塊導(dǎo)入：

 // cjs-module.js
Module.exports = {
  添加：（ a，b）=> ab，
  減：（a，b）=> a -b
};

// main.js
const {add} = require（'./ cjs-module'）;

即使您僅使用add ，兩個(gè)功能也可能最終出現(xiàn)在捆綁中，因?yàn)?code>require()是動(dòng)態(tài)的。

使樹(shù)木搖晃為您

為了充分利用樹(shù)木的顫抖，請(qǐng)遵循以下最佳實(shí)踐：

• ?始終使用ES6模塊語(yǔ)法（ import / export ）

• ?選擇發(fā)布ES6模塊版本的庫(kù)（在package.json中查找module或exports字段）

• ?當(dāng)您只需要一個(gè)函數(shù)時(shí)，請(qǐng)避免默認(rèn)導(dǎo)入：

   // 避免
  從“ lodash”導(dǎo)入_;
  console.log（_。Clamp（-5，0，10））;
  
  //優(yōu)先（如果支持）
  從'lodash-es'導(dǎo)入{clamp};

• ?在您的捆綁器中啟用生產(chǎn)模式（例如，WebPack僅在mode: 'production' ）

• ?使用bundlephobia.com之類(lèi)的工具檢查包裹是否支持樹(shù)搖

另外，請(qǐng)注意，副作用會(huì)阻塞樹(shù)木的顫抖。如果文件僅通過(guò)導(dǎo)入（例如，polyfills，css Imports或帶有副作用的代碼）執(zhí)行操作，則包裹者也可以保留它，即使沒(méi)有任何導(dǎo)出。

您可以向WebPack發(fā)出信號(hào)，哪些文件沒(méi)有副作用：

 // package.json
{
  “副作用”：false
}

或列出確實(shí)具有副作用的特定文件：

 “副作用”：[
  “ ./src/polyfills.js”，
  “*.css”
這是給出的

這有助於捆綁器安全刪除未使用的模塊。

常見(jiàn)的陷阱和誤解

• “僅導(dǎo)入一個(gè)函數(shù)意味著僅該功能被捆綁在一起?！?/strong>
  如果庫(kù)不使用ES模塊或使用錯(cuò)誤的導(dǎo)入路徑（例如，從lodash而不是lodash-es導(dǎo)入），則不正確。

• “樹(shù)木搖晃的盒子100％。”
  這取決於您的工具設(shè)置，庫(kù)選擇和編碼模式。始終使用捆綁分析儀進(jìn)行驗(yàn)證。

• “它從所有庫(kù)中刪除了未使用的代碼?！?/strong>
  只有這些圖書(shū)館的創(chuàng)作是牢記樹(shù)的搖晃。許多較老或結(jié)構(gòu)不佳的包裹仍然包裹所有東西。