Webpack4: Tree-shaking 深度解析

什么是Tree-shaking

所謂Tree-shaking就是‘搖’的意思，作用是把項目中沒必要的模塊全部抖掉，用于在不同的模塊之間消除無用的代碼，可列為性能優化的范疇。

Tree-shaking早期由rollup實現，后來webpack2也實現了Tree-shaking的功能，但是至今還不是很完備。至于為什么不完備，可以看一下百度外賣的Tree-shaking原理

Tree-shading原理

Tree-shaking的本質用于消除項目一些不必要的代碼。早在編譯原理中就有提到DCE(dead code eliminnation)，作用是消除不可能執行的代碼，它的工作是使用編輯器判斷出某些代碼是不可能執行的，然后清除。

Tree-shaking同樣的也是消除項目中不必要的代碼，但是和DCE又有略不相同。可以說是DCE的一種實現，它的主要工作是應用于模塊間，在打包過程中抽出有用的部分，用于完成DCE。

Tree-shaking是依賴ES6模塊靜態分析的，ES6 module的特點如下：

只能作為模塊頂層的語句出現
import 的模塊名只能是字符串常量
import binding 是 immutable的

依賴關系確定，與運行時無關，靜態分析。正式因為ES6 module的這些特點，才讓Tree-shaking更加流行。

主要特點還是依賴于ES6的靜態分析，在編譯時確定模塊。如果是require，在運行時確定模塊，那么將無法去分析模塊是否可用，只有在編譯時分析，才不會影響運行時的狀態。

Webpack4的Tree-shaking

webpack從第2版本就開始支持Tree-shaking的功能，但是至今也并不能實現的那么完美。凡是具有副作用的模塊，webpack的Tree-shaking就歇菜了。

副作用

副作用在我們項目中，也同樣是頻繁的出現。知道函數式編程的朋友都會知道這個名詞。所謂模塊(這里模塊可稱為一個函數)具有副作用，就是說這個模塊是不純的。這里可以引入純函數的概念。

對于相同的輸入就有相同的輸出，不依賴外部環境，也不改變外部環境。

符合上述就可以稱為純函數，不符合就是不純的，是具有副作用的，是可能對外界造成影響的。

webpack自身的Tree-shaking不能分析副作用的模塊。以lodash-es這個模塊來舉個例子

//test.js
import _ from "lodash-es";const func1 = function(value){return _.isArray(value);
}
const func2 = function(value){return value=null;
}export {func1,func2,
}
//index.js
import {func2} from './test.js'
func2()
復制代碼

上述代碼在test.js中引入lodash-es,在func1中使用了loadsh，并且這里不符合純函數的概念，它是具有副作用的。func2是一個純函數。

在index.js中只引入了func2，并且使用了func2，可見整個代碼的執行是和func1是沒有任何關系的。我們通過生產環境打包一下試試看(Tree-shaking只在生產環境生效)

main.js 91.7KB，可見這個結果是符合我們的預期的，因為func1函數的副作用，webpack自身的Tree-shaking并沒有檢測到這里有沒必要的模塊。解決辦法還是用的，webpack的插件系統是很強大的。

webpack-deep-scope-plugin

webpack-deep-scope-plugin是一位中國同胞(學生)在Google夏令營，在導師Tobias帶領下寫的一個webpack插件。(此時慢慢的羨慕)

這個插件主要用于填充webpack自身Tree-shaking的不足，通過作用域分析來消除無用的代碼。

插件的原理

這個插件是基于作用域分析的，那么都有什么樣的作用域？

// module scope start// Block{ // <- scope start
} // <- scope end// Classclass Foo { // <- scope start} // <- scope end// If elseif (true) { // <- scope start} /* <- scope end */ else { // <- scope start} // <- scope end// Forfor (;;) { // <- scope start
} // <- scope end// Catchtry {} catch (e) { // <- scope start} // <- scope end// Functionfunction() { // <- scope start
} // <- scope end// Scopeswitch() { // <- scope start
} // <- scope end// module scope end
復制代碼

對于ES6模塊來說，上面作用域只有function和class是可以被導出的，其他的作用域可以稱之為function和class的子作用域并不能被導出實際上歸屬于父作用域的。

插件通過分析代碼的作用域，進而得到作用域與作用域之間的關系。

分析作用域

分析代碼的作用域的基礎是建立做AST(Abstract Syntax Tree)抽象語法樹上面的。這個可以通過escope來完成。

拿到解析完的AST抽象語法樹，利用圖的深度優先遍歷找到哪些作用域是可以被使用到的，哪些作用域是不可以被使用到的。從而分析作用域之間的關系和導出變量之間的關系。進而執行模塊消除。

插件的不足

JavaScript中還是有一些代碼是不會消去的。

根作用域的引用

import { isNull } from 'lodash-es';export function scope(...args) {return isNull(...args);
}復制代碼

在根作用域引用到的作用域不會被消除。

給變量重新賦值

import _ from "lodash-es";var func1
func1 = function(value){return _.isArray(value);
}
const func2 = function(value){return value=null;
}export {func1,func2,
}
復制代碼

上述代碼中先定義了func1，然后又給func1賦值，這樣缺少了數據流分析，同樣插件也是不可以的。

純函數調用

引用作者的例子

import _curry1 from './internal/_curry1';
import curryN from './curryN';
import max from './max';
import pluck from './pluck';var allPass = /*#__PURE__*/_curry1(function allPass(preds) {return curryN(reduce(max, 0, pluck('length', preds)), function () {var idx = 0;var len = preds.length;while (idx < len) {if (!preds[idx].apply(this, arguments)) {return false;}idx += 1;}return true;});
});
export default allPass;
復制代碼

當一個匿名函數被包在一個函數調用中(IIFE也是如此)，那么插件是無法分析的。但是如果加上/*#__PURE__*/注釋的話，這個插件會把這個函數調用當作一個獨立的域，tree-shaking是可以生效的。

探討的一些問題

我們都知道在這個ES6泛濫的時代，ES6的代碼在項目中出現已經很廣泛。（先不考慮線上環境打包成ES5）。上面提到插件的利用作用域來分析。能導出的作用域只有class和funciton。function的情況在上面已經說過，現在來探討一下class的情況。

no plugin

當不使用插件的時候，我們來看一下會不會Tree-shaking，預期是會被Tree-shaking。書寫下面這樣一段簡單的代碼。

class Test{init(value){console.log('test init');}
}
export {Test,
}
復制代碼

我們發現在沒有使用插件的情況下，被Tree-shaking了。預期相同。

no plugin + 副作用

當我們在不適用插件的情況下，并且引入副作用，觀察一下會不會打包，預期是不會打包。書寫下面代碼。

class Test{init(value){console.log('test init');return _.isArray(value);}
}
export {Test,
}
復制代碼

觀察打包結果，main.js 91.7KB，并沒有被Tree-shaking，符合預期的結果。

plugin + 副作用

當我們使用插件并且代碼中存在副作用的情況下，觀察打包情況。由于上面的插件原理的鋪墊，我們預期這次是可以Tree-shaking的。利用上例代碼來測試。

我們觀察可以看出main.js 6.78KB,Tree-shaking生效。

plugin + 副作用 + babel

由于用戶瀏覽器對ES6支持度不夠的原因，線上的代碼不能全是ES6的，有時候我們要把ES6的代碼打包成ES5的，放到線上環境來執行。利用上例代碼來測試。

？？？什么鬼，我沒有用到它，為什么這么大？？？一串懵逼

成也babel，敗也babel

懵逼懵逼，babel成就了線上生產環境，但失去了Tree-shaking優化。我們來看看怎么回事。

沒有副作用的情況

當去除調副作用的時候我們來打包一下。

沒有找到test init Tree-shaking生效。為什么呢？我們使用babel線上工具編譯一下源代碼。

"use strict";function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {return right[Symbol.hasInstance](left); } else {return left instanceof right; } }function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } 
}function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } 
}function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }var Test =/*#__PURE__*/function () {function Test() {_classCallCheck(this, Test);}_createClass(Test, [{key: "init",value: function init(value) {console.log("test init")}}]);return Test;}();
復制代碼

上面可以看到最新的babel和webpack有了契合，在Test立即執行函數的地方使用了 /*#__PURE__*/(忘記可以往上看)，讓下面的IIFE變成可分析的，成功了使用了Tree-shaking。

有副作用的情況下

上面探討情況的時候就得知有副作用的情況下，不可以被打包的。ES6編譯代碼如下。

"use strict";function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {return right[Symbol.hasInstance](left); } else {return left instanceof right; } }function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } 
}function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } 
}function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }var Test =/*#__PURE__*/function () {function Test() {_classCallCheck(this, Test);}_createClass(Test, [{key: "init",value: function init(value) {console.log("test init")return _.isArray(value);}}]);return Test;}();
復制代碼

這里雖然bable新版契合了webpack，但是還是有一些問題。自己也沒有找出是哪里除了問題，作者說JavaScript代碼還是有一些是不可以清除的，也許就出現到這里。提供一個作者的插件Demo。

babel的解決方案

無論是ES6，還是ES5，Tree-shaking不能生效的原因總的歸根結底還是因為代碼副作用的問題。可想而知代碼的書寫規范是多么重要。這里我所想出的解決方案有兩種。

1.代碼的書寫規范，盡量避免副作用。

書寫代碼過程中盡量使用純函數的方式來寫代碼，保持書寫規范，不讓代碼有副作用。例如把class類引用的副作用改成純的。

class Test{init(value,_){  //參數引入lodash模塊console.log('test init');return _.isArray(value);}
}
export{Test，
}
復制代碼

可以看出，沒有副作用的ES6代碼編譯成ES5，Tree-shaking也是生效的。

2.靈活使用ES6代碼

兩套代碼。當瀏覽器支持的時候，就使用ES6的代碼，ES5的代碼。此方案可參考瀏覽器支持ES6的最優解決方案

總結

項目中難免會一些用不到的模塊占位置影響我們的項目，Tree-shaking的出現也為開發者在性能優化方面提供了非常大的幫助，靈活使用Tree-shaking才能讓Tree-shaking發揮作用，處理好項目中代碼的副作用可以使項目更加的完美。

引用文章

webpack 如何通過作用域分析消除無用代碼

Tree-Shaking性能優化實踐 - 原理篇

原文發布于Webpack4:Tree-shaking深度解析