寫在前面

最近在讀霍老師的《Vue.js設計與實現(xiàn)》，感覺收獲很多，由于霍老師是官方Vue維護成員，會從很通俗易懂的角度去講Vue的實現(xiàn)細節(jié)。而不是按照源碼死講解，很不錯，推薦給大伙!

直奔主題

Tree-Shaking 的本質其實就是消除無用代碼也就是dead code，減小打包后文件，不太清楚dead code概念的不用擔心，下面會講到。Tree-Shaking是打包構建工具常用的優(yōu)化手段。在我們日常的開發(fā)最常使用的，可能就是ESM的使用，會觸發(fā)默認的Tree-Shaking機制并對無效代碼進行處理。

//utils.js
const str = "Hello Word";
export function fun1(){
    console.log(str);
}
export function fun2(){
    console.log(str);
}
//index.js
import { fun2 } from 'utils.js'

這里的fun1并不會被打包到最后生成 build 文件，證明fun1滿足了dead code的條件，從而觸發(fā)了Tree-Shaking機制。

dead code 條件

1.代碼不會被執(zhí)行，不可到達

2.代碼執(zhí)行的結果不會被用到

3.代碼只會影響死變量（只寫不讀）

這里有一個例外 就是js由于是動態(tài)類型的語言 很難從純編譯下解析到當前是否是dead code 如：

//utils.js
function fun1(){
    console.log(str);
}
fun1.prototype.run = function(){
    console.log("run");
}
Array.prototype.stop = function(){
    console.log("stop");
}
export const fun1;

雖然沒有被調用，但是在打包后生成的build 文件中依舊會包含這段代碼，是因為無法靜態(tài)解析這段代碼是否真正無用，如果刪除掉了utils.js 會導致Array原型上方法也失效。所以，這就引出了另一個很重要的概念就是，副作用，如果一個 函數(shù)調用會產生副作用，那么就不能將其移除。什么是副作用？簡單 地說，副作用就是，當調用函數(shù)的時候會對外部產生影響

當我們遇到打包工具無法靜態(tài)解析的代碼，可以通過打包工具的另一個機制去做手動告知

import {fun1} from './utils'
/*#__PURE__*/ fun1()

這里的/*#__PURE__*/ 就是告知打包工具 這段代碼的調用不會產生副作用，你隨便刪，設置過完后再次重新打包就會發(fā)現(xiàn)，Array 原型上聲明stop 就不包含在內了！

知道了這些，那我們日常應該如何利用Tree-Shaking機制呢？

如在我們的代碼中，封裝根據開發(fā)環(huán)境，設置動態(tài)api、不同調試log?？梢酝ㄟ^打包工具的預構建常量，配合判斷，如果環(huán)境不是測試環(huán)境，會被檢測為dead code從而移出構建最終的構建文件中。實現(xiàn)優(yōu)化打包體積，并且不會影響我們開發(fā)的環(huán)境。

//webpack.config.js
new webpack.DefinePlugin({
 __DEV_OPTIONS_: JSON.stringify(true)
})
//index.js
if(__DEV_OPTIONS_){
    //初始化開發(fā)環(huán)境下的相關配置
    initLog();
    setApi();
}

最后

以上就是本篇文章的全部內容了！學習思路來自《Vue.js設計與實現(xiàn)》分享給大家！

更多關于Tree-Shaking 機制的資料請關注腳本之家其它相關文章！

最新評論