什么是Tree-Shaking

Tree-Shaking這個(gè)概念在前端領(lǐng)域是因?yàn)?code>rollup.js而起，后來webpack等也加入支持Tree-Shaking的行列中。簡(jiǎn)單來說就是移除掉項(xiàng)目中永遠(yuǎn)不會(huì)被執(zhí)行的代碼（dead code），實(shí)際情況中，代碼雖然依賴了某個(gè)模塊，但其實(shí)只使用其中的某些功能。通過Tree-shaking，將沒有使用的模塊代碼移除掉，這樣來達(dá)到刪除無用代碼的目的。

Tree-shaking的原理和支持

• 實(shí)現(xiàn)tree-shaking的基礎(chǔ)是依賴于ES6的模塊特性，即模塊必須是ESM（ES Module）。這是因?yàn)镋S6模塊的依賴關(guān)系是確定的、靜態(tài)的，和運(yùn)行的時(shí)的狀態(tài)無關(guān)，可以進(jìn)行靜態(tài)分析。
• 現(xiàn)在主流的打包工具都支持Tree-shaking，例如最早支持的rollup，后來支持的webpack，以及vite等等。

可以被Tree-shaking

有以下代碼，其中工具函數(shù)文件中包含了foo與bar，在shaking文件中只使用了foo，在main文件中引用了foo，但沒有使用：

// utils.js
export const foo = () => {
    console.log('foo')
}
export const bar = () => {
    console.log('bar')
}
// shaking.js
import { foo } from './utils.js'
const fn = () => {
    console.log('fn')
    foo()
}
fn()
// main.js
import { foo, bar } from './utils.js'
const main = () => {
    console.log('main')
    bar()
}
main()

現(xiàn)在分包使用rollup.js打包shaking.js與main.js文件

# 打包shaking文件
npx rollup shaking.js -f esm -o bundle.js
# 打包main文件
npx rollup main.js -f esm -o mian-bundle.js

先來看bundle.js文件的內(nèi)容,utils文件中foo打包進(jìn)去，而bar沒有被引用，則被移除。

const foo = () => {
    console.log('foo');
};
const fn = () => {
    console.log('fn');
    foo();
};
fn();

再來看main-bundle.js文件的內(nèi)容,utils文件中bar打包進(jìn)去，而foo雖然被引用，但是沒有在main.js文件中使用，則被移除。

const bar = () => {
    console.log('bar');
};
const main = () => {
    console.log('main');
    bar();
};
main();

不可以被Tree-shaking

有些代碼看著無用，但是確不能被Tree-shaking移除，例如我們對(duì)上面的代碼進(jìn)行重寫

// utils.js
// 新增以下代碼
export default {
    name: function () {
        console.log('絕對(duì)零度')
    },
    age: () => {
        console.log(18)
    }
}
// shaking.js
import userInfo,  { foo } from './utils.js'
const fn = () => {
    console.log('fn')
    userInfo.name()
    foo()
}
fn()

再次使用rollup.js打包文件

const foo = () => {
    console.log('foo');
};
var userInfo = {
    name: function () {
        console.log('絕對(duì)零度');
    },
    age: () => {
        console.log(18);
    }
};
const fn = () => {
    console.log('fn');
    userInfo.name();
    foo();
};
fn();

有意思的問題來了，這次我們僅僅使用name方法，而age方法也被打包進(jìn)來，說明Tree-shaking沒有生效。究其原因，export default導(dǎo)出的是一個(gè)對(duì)象，無法通過靜態(tài)分析判斷出一個(gè)對(duì)象的哪些變量未被使用，所以tree-shaking只對(duì)使用export導(dǎo)出的變量生效。

另外一個(gè)問題是，如果一個(gè)函數(shù)被調(diào)用的時(shí)候會(huì)產(chǎn)生副作用，那么就不會(huì)被移除。再次在utils文件中增加下面代碼

// utils.js新增的代碼
export const empty = () => {
    const a = 1
}
export const effect = (obj) => {
    obj && obj.a
}

再次導(dǎo)入使用然后打包

// shaking.js文件
import userInfo,  { foo, empty, effect } from './utils.js'
const fn = () => {
    console.log('fn')
    userInfo.name()
    empty()
    effect()
    foo()
}
fn()

打包后發(fā)現(xiàn)新增加了一個(gè)effect函數(shù)，而同時(shí)新增的empty函數(shù)被移除，分析原因發(fā)現(xiàn)effect函數(shù)就是一個(gè)純讀取函數(shù)，但是這個(gè)函數(shù)可能會(huì)產(chǎn)生副作用。試想一下，如果obj對(duì)象是一個(gè)通過Proxy創(chuàng)建的代理對(duì)象，那么當(dāng)我們讀取對(duì)象屬性時(shí)，就會(huì)觸發(fā)代理對(duì)象的get方法，在get方法中是可能產(chǎn)生副作用的，比如調(diào)用其它的方法或者修改一些變量等等。

const foo = () => {
    console.log('foo');
};
const effect = (obj) => {
    obj && obj.a;
};
var userInfo = {
    name: function () {
        console.log('絕對(duì)零度');
    },
    age: () => {
        console.log(18);
    }
};
const fn = () => {
    console.log('fn');
    userInfo.name();
    effect();
    foo();
};
fn();

由于rollup.js分析靜態(tài)代碼很困難，所以他們給我們提供一個(gè)機(jī)制，明確告訴rollup，這部分代碼沒有副作用可以移除。/*#__PURE__*/就是解決這個(gè)問題的辦法，只需要在effect方法前面加上上面的代碼，程序運(yùn)行的時(shí)候就會(huì)認(rèn)為他是沒有副作用的，可以放心的進(jìn)行Tree-shaking。

/*#__PURE__*/const effect = (obj) => {
    obj && obj.a;
};

Vue中的應(yīng)用

在Vue的框架源碼中，存在這大量的特性開關(guān)，打包編譯或者使用的時(shí)候通過配置特性開關(guān)可以通過Tree-shaking機(jī)制讓代碼資源最優(yōu)化。
比如Vue3為了支持Vue2的options Api，寫了大量的兼容代碼，但是如果我們?cè)偈褂?code>Vue3中不使用options Api，就可以通過一個(gè)叫做__VUE_OPTIONS_API__的特性開關(guān)去關(guān)閉這個(gè)特性，這樣最終打包的Vue代碼就不會(huì)包含這部分，進(jìn)而減少代碼體積。

到此這篇關(guān)于理解Vue中的Tree-Shaking的文章就介紹到這了,更多相關(guān)Vue中的Tree-Shaking內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論