寫在前面

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

直奔主題

Tree-Shaking 的本質(zhì)其實(shí)就是消除無(wú)用代碼也就是dead code，減小打包后文件，不太清楚dead code概念的不用擔(dān)心，下面會(huì)講到。Tree-Shaking是打包構(gòu)建工具常用的優(yōu)化手段。在我們?nèi)粘５拈_(kāi)發(fā)最常使用的，可能就是ESM的使用，會(huì)觸發(fā)默認(rèn)的Tree-Shaking機(jī)制并對(duì)無(wú)效代碼進(jìn)行處理。

//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并不會(huì)被打包到最后生成 build 文件，證明fun1滿足了dead code的條件，從而觸發(fā)了Tree-Shaking機(jī)制。

dead code 條件

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

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

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

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

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

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

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

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

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

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

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

最后

以上就是本篇文章的全部?jī)?nèi)容了！學(xué)習(xí)思路來(lái)自《Vue.js設(shè)計(jì)與實(shí)現(xiàn)》分享給大家！

更多關(guān)于Tree-Shaking 機(jī)制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論