前陣子在和朋友聊 Webpack 的時候，突然提到 Tree Shaking，但很慚愧的是我沒有辦法好好說明 Webpack 是如何做到 Tree Shaking 的，因此就趁這個年假的第一天抽空讀 Webpack 的文件，然后把理解到的心得寫下來，如果你也有興趣，就一起看下去吧 。

Tree Shaking 是什麼

Tree Shaking 是個優化的方式，在 JavaScript 中用來表示移除沒用的代碼的一個常見術語，之所以叫做 Tree Shaking 的由來似乎是指說“當你大力搖晃一棵樹的時候，樹上就只會留著綠色的葉子，其他枯葉都會落到地上”，而那些綠色的葉子就是打包過后的文件中，真正有用到的代碼。

在使用時要注意的是，Tree Shaking 只能夠使用在 static structure(例如：import 和 export 上)，像是dynamic structure的 require 就沒辦法被偵測到。舉例來說，import 要載入某個 module 使用的話就一定要在文件的最上方，但 require 可以在任何地方使用，例如以下場景就必須要等到 runtime才會知道 module 是什么：

let module = null;

if (Math.random() * 10 > 5) {
  module = require('module1');
} else {
  module = require('moudle2');
}

那開始了解 Tree Shaking 的工作前，應該會有些人好奇，就算自己從來就沒有特別在 Webpack 中設置 Tree Shaking，但是沒有用的代碼也都會被移除呀!

那是因為 Tree Shaking 的執行需要 ModuleConcatenationPlugin(圖一)，而 Webpack 里另外有個 mode，如果你一直沒有特別去設置 mode 的值，那 mode 就預設會是 production(圖二)，然后 production 的預設選項中就會開啟 ModuleConcatenationPlugin(也是圖二)，因此平常不會特別注意到也不奇怪，因為 Webpack 都幫你做好了。

Tree Shaking 的運作

因為 Production 會幫你打開 ModuleConcatenationPlugin ，所以待會我們實驗的時候，要把 mode 改成 none(Webpack 文件說 none 為關掉所有優化設置的模式)。

這邊會附上簡單的 初始化示例配置，有興趣的話，可以把它 clone 下來一起玩看看。

首先在 src 下建立一個 math.js 和 string.js，接著個別寫下一個方法做export，分別是 add 和 composeString：

const add = (a, b) => a + b;

export default { add };

const composeString = (a, b) => `${a} ${b}`;

export default { composeString };

打開 src 下的 index.js，把 add 和 composeString 都 import，但只使用add 方法：

import { add } from './math';
import { addString } from './string';

console.log(add(1, 2))

最后到 terminal 中執行 npm run build 或是 webpack 做打包，打包結束后，會發現雖然我們只有import add 做使用，但是打包后的檔案內容還是會有composeString：

不過這很正常，畢竟我們還沒有做任何處理，Webpack 在打包時也不曉得你哪些代碼到底有沒有用到，就沒辦法幫你把 composeString 移除。

那么到底什么樣的代碼是有用的，怎樣是沒用的呢??

最明顯的定義應該是，如果有被執行就代表有用到。像是上面例子的 add一樣。

有 side effect 的代碼也是被用到的。像是上方的 index.js，看起來什么方法都沒有提供，但是執行時卻會在 console 中留下 log，除此之外，會改變執行環境的 polyfill 也是有 side effect 的 library。

第一種情況相對容易分辨，但如果是第二種情況的話，可以選擇用 Webpack 中的 sideEffects 屬性來設置。

sideEffects

sideEffects 可以被設置為 Boolean 或是 Array，當你把它設置為 false 的時候，代表該項目是不會有 sideEffects 的，也就是一律用 export 判斷是否使用。另外 sideEffects 會依賴 providedExports，用來找出項目中所有 export的 module：

以下是 sideEffects 的使用方式：

{
  "name": "tree-shaking",
  "sideEffects": false,
  "version": "1.0.0",
  ...
}

只要在package.json中加上 sideEffects，并且將值設定為 flase，就代表該項目內所有的代碼都沒有 side effect，因此 Webpack 在打包的時候，就可以把沒有用到的 export 代碼給移除。

加上 sideEffects 后打包，就不會看到 composeString 在結果裡了：

那現在我們再到 src 中建立另一個polyfill.js，在ployfill.js 里為 Array 建立自定義的方法，再把它 import 到index.js 中：

index.js

import './polyfill';
import { add } from './math';
import { addString } from './string';

console.log([].customMethod());

**polyfill.js **

Array.prototype.customMethod = () => {
  console.log('customMethods');
};

如果我們去打包上方的代碼，polyfill.js 會因為沒有任何 export，所以不會被providedExports 抓到，也就不會被打包到 Production，這會導致項目如果有使用到 Array 的 customMethod，在執行時就會出錯。面對這種情況，就必須要在 sideEffects 屬性中告知，polyfill.js 是有 side effect 的。設置方法如下：

{
  "name": "tree-shaking",
  "sideEffects": ["./src/polyfill.js"],
  "version": "1.0.0",
  ...
}

如此一來，polyfill.js 就會直接被打包了：

最后要注意兩件事情：

如果各位的項目中也有 import.css 樣式來用的話，也記得要將 .css 結尾的文件名放到 sideEffects，例如 sideEffects: ["*.css"]。

在webpack.config.js 裡的 optimization 也有 sideEffects，但在這裡設置的值是針對 node_modules 中的。

useExported

useExported 的作用和 sideEffects 都是用來判斷是否該移除代碼，但根據 Webpack 文件內的說明，useExported 才是真正的 Tree Shaking：

usedExports 會使用 terser 判斷代碼有沒有side effect，如果沒有用到，又沒有side effect 的話，就會在打包時替它標記上unused harmony，并在minify(用 Uglifyjs 或其他工具)的時候移除。

在測試 usedExports 之前，先到math.js 裡加入 square 并 export：

const add = (a, b) => a + b;

const square = (a, b) => a * b;

export { add, square };

接下來到 webpack.config.js 中加入optimization.usedExports：

module.exports = {
  ...
  optimization: {
    usedExports: true,
  }
};

然后對項目進行打包，就會發現僅僅是 export，但沒有使用的 square 會被標記上 unused harmony export：

接著我們使用 uglifyjs-webpack-plugin，把沒有用到的 square 從樹上搖晃下來：

npm install -d uglifyjs-webpack-plugin

webpack.config.js的設置如下：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  ...
  optimization: {
    usedExports: true,
    minimize: true,
    minimizer: [
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: { unused: true },
                mangle: false,
                output: {
                    beautify: true
                }
            },
        })
    ],
  }
};

設置完 minimizer 后，再打包一次，就能看見 square 已經被移除了：

usedExports 與 sideEffects 不同的是，usedExports 可以以陳述句為單位去判斷是否有 side effect，但是 sideEffects 可以讓 Webpack 在打包的時候，直接略過一整個文件，只要是出現在 sideEffect 裡的文件就是直接打包，也不用透過 terser 評估副作用。

總結

Tree Shaking 只能在static structure使用，如果項目中的 babel 會將static structure 編譯成dynamic structure 的話，要另外設置。

使用 sideEffects 時，要寫在package.json，如果是要對第三方函式庫優化，要寫在 webpack.config.js裡的 optimization。

usedExports 才是 Tree Shacking，使用時會自動判斷沒使用的代碼，并標記 unused harmony 的注解，要移除的話要另外使用 minify。

作者：神Q超人 譯者：前端小智 來源：medium

原文：https://medium.com/starbugs/%E7%B2%BE%E6%B96%E7%9A%84%E6%89%93%E5%8C%85-webpack-%E7%9A%84-tree-shaking-ad39e185f284