前言

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

準備工作

為了更好的觀察效果，需要初始化一個demo項目，該項目會使用最新的 webpack5。

創(chuàng)建 package.json

npm init -y

安裝 webpack 和 webpack-cli

npm install -D webpack webpack-cli

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

module.exports = {
}

創(chuàng)建 src 文件夾，里面創(chuàng)建 helper.js 文件，添加兩個函數(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('永遠不會執(zhí)行')
}
const unused = '定義了沒有用到'

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

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

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

module.exports = {
  mode: 'production'
}

此時運行

npx webpack

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

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

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

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

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

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

運行 npx webpack 打包，然后在 dist 文件夾中的 main.js 從第11行開始查看

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

再從79行開始看

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

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

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

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

運行打包命令后，生成的文件因為壓縮的緣故變成了一行，格式化后查看 b 函數(shù)真的沒有了，也就是說我們 tree-shaking 成功了

tree-shaking的步驟

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

sideEffects副作用

webpack 怎么會知道哪些模塊沒有用到，哪些模塊用到了呢？

• 場景1：引入并且使用

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

這種情況剛才已經(jīng)驗證過了 a 依然存在，因為它被使用過了

• 場景2：引入不使用

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

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

• 場景3：引入js文件

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

window.a = '全局a'

在 index.js 中引入

import './polyfill'

運行打包 npx webpack，打開 dist/main.js 觀察結(jié)果

雖然只是引入，沒有運行，但是也被保留下來了

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

"sideEffects": false,

運行打包 npx webpack，打開 dist 文件夾 cat main.js 觀察結(jié)果結(jié)果，又變成了一個空文件，說明被 tree-shaking 掉了

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

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

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

commonjs能不能tree-shaking

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

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

請問此時哪個模塊用到了，哪個模塊沒用到？連人都不能判斷，電腦就更不能判斷了，但是如果是確定的引用關(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()

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

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

寫在最后

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

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

最新評論