前言

前端在做性能優(yōu)化的時(shí)候，其中一種有效的方式就是減少包體積的大小。而減少包體積大小的其中一種有效的方式就是 tree-shaking，翻譯成中文就是搖樹(shù)。這個(gè)詞非常形象，當(dāng)果樹(shù)結(jié)果后，如果用力搖樹(shù)，那些成熟了但是還掛在樹(shù)上的果子就會(huì)掉下來(lái)，減輕樹(shù)的負(fù)擔(dān)，因?yàn)楣右呀?jīng)成熟了，沒(méi)有必要在呆在樹(shù)上了。類比到程序里面，就是在打包的時(shí)候把“死代碼”刪除掉，而“死代碼”就是定義了，但是沒(méi)有使用的代碼。本文會(huì)對(duì) tree-shaking 這個(gè)功能做一個(gè)詳細(xì)的解析。

準(zhǔn)備工作

為了更好的觀察效果，需要初始化一個(gè)demo項(xiàng)目，該項(xiàng)目會(huì)使用最新的 webpack5。

創(chuàng)建 package.json

npm init -y

安裝 webpack 和 webpack-cli

npm install -D webpack webpack-cli

在項(xiàng)目根目錄下創(chuàng)建一個(gè) webpack.config.js，導(dǎo)出一個(gè)空對(duì)象就可以，一會(huì)會(huì)在里面添加配置

module.exports = {
}

創(chuàng)建 src 文件夾，里面創(chuàng)建 helper.js 文件，添加兩個(gè)函數(shù)

export function a () {
  console.log('我是a')
}
export function b () {
  console.log('我是b')
}

再在 src 文件夾下創(chuàng)建 index.js，引入剛才創(chuàng)建的函數(shù) a，并且寫幾段“死代碼”

import { a } from './helper.js'
a()
if (false) {
  console.log('永遠(yuǎn)不會(huì)執(zhí)行')
}
const unused = '定義了沒(méi)有用到'

這里只引入了 a 函數(shù)并且執(zhí)行，方法 b 并沒(méi)有引入。if 中是 false，所以 console.log 不會(huì)執(zhí)行，而 unused 變量定義了但是并沒(méi)有使用，它們都是所謂的“死代碼”。

生產(chǎn)環(huán)境配置tree-shaking

準(zhǔn)備工作做完之后，我們就要開(kāi)始 tree-shaking 了，由于使用的是 webpack5，所以配置非常簡(jiǎn)單，在 webpack.config.js 配置一下環(huán)境就可以了

module.exports = {
  mode: 'production'
}

此時(shí)運(yùn)行

npx webpack

打開(kāi) dist 文件夾中的 main.js 觀察結(jié)果

可以看到 webpack 已經(jīng)幫你做了極致的優(yōu)化，只留下了有用的代碼，并且通過(guò)靜態(tài)分析，把引入模塊的步驟都做了。也就是說(shuō)在生產(chǎn)環(huán)境，可能你自己都不知道 webpack 已經(jīng)幫你 tree-shaking 了。

開(kāi)發(fā)環(huán)境觀察tree-shaking

剛才的過(guò)程有點(diǎn)像豬八戒吃人參果，還沒(méi)嘗到味道就結(jié)束了。根本看不出是什么刪除的，所以我們要用開(kāi)發(fā)環(huán)境一步一步的觀察。

在 webpack.config.js 中把環(huán)境修改為開(kāi)發(fā)環(huán)境。devtool 修改為 source-map，這和 tree-shaking 配置無(wú)關(guān)，主要是為了便于觀察，因?yàn)槟J(rèn)的 eval 模式會(huì)讓代碼在一行。最后就是最重要的配置了：usedExports，這個(gè)屬性這個(gè)會(huì)告訴 webpack 去收集 export 或 import 的變量在程序中是否用到，并以注釋的形式標(biāo)記出來(lái)。

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  optimization: {
    usedExports: true
  }
}

運(yùn)行 npx webpack 打包，然后在 dist 文件夾中的 main.js 從第11行開(kāi)始查看

雖然聲明了 a 和 b ，但是通過(guò)靜態(tài)分析后，只導(dǎo)出了 a ，并且添加了注釋 /* unused harmony export b */，意思是 b 并沒(méi)有用到

再?gòu)?9行開(kāi)始看

先運(yùn)行了函數(shù) a，然后 if 中所有的邏輯都被刪除掉了，但是定義的 unused 還在

此時(shí)已經(jīng)完成了一半工作，標(biāo)記沒(méi)有用到的代碼。而另一半工作就是刪除帶有標(biāo)記的代碼，此時(shí)就要使用壓縮工具了，繼續(xù)修改 webpack.config.js 的配置

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  optimization: {
    minimize: true, // 增加了這一行
    usedExports: true 
  }
}

minimize: true，表示使用壓縮，webpack5 默認(rèn)的壓縮工具是 taser，它會(huì)在壓縮的同時(shí)檢測(cè)到 /* unused harmony export xxx */ 這種注釋就會(huì)將對(duì)應(yīng)的代碼刪除掉

運(yùn)行打包命令后，生成的文件因?yàn)閴嚎s的緣故變成了一行，格式化后查看 b 函數(shù)真的沒(méi)有了，也就是說(shuō)我們 tree-shaking 成功了

tree-shaking的步驟

• 依賴收集：webpack在打包時(shí)，會(huì)將每個(gè)模塊中的導(dǎo)出語(yǔ)句格式化后保存在一個(gè)數(shù)組中，并最終存儲(chǔ)在ModuleGraph，它記錄了模塊間的依賴關(guān)系
• 標(biāo)記：遍歷所有模塊，如果用到了收集來(lái)的導(dǎo)出的變量，將會(huì)打上已使用的標(biāo)記
• 刪除：通過(guò)默認(rèn)的壓縮工具 taser 的 taser-webpack-plugin，對(duì)于沒(méi)有打標(biāo)記的導(dǎo)出，就會(huì)被刪除掉

sideEffects副作用

webpack 怎么會(huì)知道哪些模塊沒(méi)有用到，哪些模塊用到了呢？

• 場(chǎng)景1：引入并且使用

import { a } from './helper.js'
a()

這種情況剛才已經(jīng)驗(yàn)證過(guò)了 a 依然存在，因?yàn)樗皇褂眠^(guò)了

• 場(chǎng)景2：引入不使用

import { a } from './helper.js'

這種情況 a 雖然被引入，但是沒(méi)有使用，所以和 b 函數(shù)一樣，也被刪除掉了，打包結(jié)果變成了一個(gè)空文件

• 場(chǎng)景3：引入js文件

這種情況通常用于在全局加 polyfill，為了方便觀察，在 src 目錄下新建 polyfill.js

window.a = '全局a'

在 index.js 中引入

import './polyfill'

運(yùn)行打包 npx webpack，打開(kāi) dist/main.js 觀察結(jié)果

雖然只是引入，沒(méi)有運(yùn)行，但是也被保留下來(lái)了

其實(shí)場(chǎng)景1和場(chǎng)景2的結(jié)果都沒(méi)有爭(zhēng)議，但是場(chǎng)景3就不同了，它引入一個(gè)有副作用的模塊，而這個(gè)模塊到底應(yīng)不應(yīng)該保留呢？如果我想把它 tree-shaking 掉應(yīng)該怎么配置呢？這時(shí)候就需要 sideEffects 配置了，我們先配置再講怎么用，在 package.json (對(duì)，就是這個(gè)文件)中增加一行

"sideEffects": false,

運(yùn)行打包 npx webpack，打開(kāi) dist 文件夾 cat main.js 觀察結(jié)果結(jié)果，又變成了一個(gè)空文件，說(shuō)明被 tree-shaking 掉了

這個(gè)配置是什么意思呢？它有三種屬性可選

• true：所有文件都有副作用，不可以 tree-shaking
• false：所有文件沒(méi)有副作用，可以 tree-shaking
• 數(shù)組：只有數(shù)組中的文件有副作用，其它的都可以 tree-shaking ，例如你可以這么寫

"sideEffects": [
    "./src/a.js",
    "./src/*.global.js
]

commonjs能不能tree-shaking

答案是 webpack4 不能，webpack5 添加了部分支持。因?yàn)?tree-shaking 依賴于 ES2015 模塊系統(tǒng)中的靜態(tài)結(jié)構(gòu)特性，也就是在編譯時(shí)而非運(yùn)行時(shí)就已經(jīng)知道哪些模塊被用到了而哪些沒(méi)有用到，但是 commonjs 卻不一定可以，例如：

let myModlue = null
if (Math.random() > 0.5) {
    myModlue = require('a')
} else {
    myModlue = require('b')
}

請(qǐng)問(wèn)此時(shí)哪個(gè)模塊用到了，哪個(gè)模塊沒(méi)用到？連人都不能判斷，電腦就更不能判斷了，但是如果是確定的引用關(guān)系呢？

在 src 下增加 helper-cjs.js 文件

exports.a = () => console.log('我是a')
exports.b = () => console.log('我是b')

在 index.js 中引入

import { a } from './helper-cjs.js'
a()

運(yùn)行打包并觀察結(jié)果

和 esmodule 一樣，無(wú)關(guān)的代碼也被 tree-shaking 掉了

寫在最后

本文帶你詳細(xì)了解了 webpack5 的 tree-shaking 使用以及原理，有問(wèn)題的話歡迎在評(píng)論區(qū)進(jìn)行討論。不出意外的話這是我今天發(fā)的最后一篇文章了。各大互聯(lián)網(wǎng)公司應(yīng)該也已經(jīng)封版不再上線新功能，歸家有期，團(tuán)圓有盼。馬上就是春節(jié)了，愿故鄉(xiāng)的暖意驅(qū)散過(guò)去一年的事與愿違。愿來(lái)年日子常新與勝意，又是一年好四季~

腳本之家其它相關(guān)文章！

最新評(píng)論