快捷導(dǎo)航

Tree-Shaking?機制快速掌握

更新時間：2023年02月16日 08:38:19 作者：JS心法

這篇文章主要為大家介紹了Tree-Shaking?機制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

寫在前面

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

直奔主題

Tree-Shaking 的本質(zhì)其實就是消除無用代碼也就是dead code，減小打包后文件，不太清楚dead code概念的不用擔(dān)心，下面會講到。Tree-Shaking是打包構(gòu)建工具常用的優(yōu)化手段。在我們?nèi)粘５拈_發(fā)最常使用的，可能就是ESM的使用，會觸發(fā)默認(rèn)的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í)行，不可到達(dá)

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

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

這里有一個例外就是js由于是動態(tài)類型的語言很難從純編譯下解析到當(dāng)前是否是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;

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

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

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

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

知道了這些，那我們?nèi)粘?yīng)該如何利用Tree-Shaking機制呢？

如在我們的代碼中，封裝根據(jù)開發(fā)環(huán)境，設(shè)置動態(tài)api、不同調(diào)試log?？梢酝ㄟ^打包工具的預(yù)構(gòu)建常量，配合判斷，如果環(huán)境不是測試環(huán)境，會被檢測為dead code從而移出構(gòu)建最終的構(gòu)建文件中。實現(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)境下的相關(guān)配置
    initLog();
    setApi();
}