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

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

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

什么實際是（不是）

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

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

重要的是：樹木顫抖與縮小不同。縮小縮短可變名稱并刪除空格。樹木搖動可去除整個未使用的代碼。

例如：

 // 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 。啟用樹木搖動，它不會包含在最后的捆綁包中。

樹引擎蓋下的樹木搖動

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

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

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

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

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

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

即使您僅使用add ，兩個功能也可能最終出現(xiàn)在捆綁中，因為require()是動態(tài)的。

使樹木搖晃為您

為了充分利用樹木的顫抖，請遵循以下最佳實踐：

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

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

• ?當(dāng)您只需要一個函數(shù)時，請避免默認(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之類的工具檢查包裹是否支持樹搖

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

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

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

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

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

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

常見的陷阱和誤解

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

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

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