Tree-shaking到底有啥用？簡簡單單地說一下！

Sunshine_Lin發表於2022-02-13

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心

背景

大家平時在查 webpack構建體積優化 ，可能都會查到 tree-shaking 這個東西，很多人看到這個東西，就會把它背下來，用來應付以後面試官可能會問到的情況。

但是，又有多少人去真的瞭解一下 tree-shaking 呢？自己去實踐一下看 tree-shaking 到底起了哪些作用？對於我們的打包體積的優化又有多少呢？

有啥用？

Tree Shaking 中文含義是搖樹，在webpack中指的是打包時把無用的程式碼搖掉，以優化打包結果。

而 webpack5 已經自帶了這個功能了，當打包環境為 production 時，預設開啟 tree-shaking 功能。

實踐

前置準備

準備兩個檔案 main.js、util.js

  • util.js 

    function a () {
console.log('a')
}
function b () {
console.log('b')
}
export default {
a, b
}

  • main.js 

    import a from './util'

// 使用a變數，呼叫檔案裡面的a函式，不使用b函式
console.log(a.a())
console.log('hello world')

// 不可能執行的程式碼
if (false) {
console.log('haha')
}

// 定義了但是沒用的變數
const m = 1

打包

前面說了 webpack5 在環境 production 下打包的話，預設開啟 tree-shaking ，那我們執行 npm run build 進行一下打包，看看打包後的程式碼長啥樣：

(()=>{"use strict";
const o=function(){console.log("a")};
console.log(o())
console.log("hello world")}
)();
結論：可以看到打包後，把 b函式、不可能執行的程式碼、定義未用的變數 通通都剔除了，這在一個專案中，能減少很多的程式碼量，進而減少打包後的檔案體積。

sideEffects

副作用

先來講講一個東西—— 副作用 ，是什麼東西呢？ 副作用 指的是：除了匯出成員之外所做的事情，我舉個例子，下面的 a.js 是沒副作用的， b.js 是有副作用的：

  • a.js 

    function console () {
console.log('console')
}
export default {
console
}

  • b.js 

    function console () {
console.log('console')
}

// 這個就是副作用，會影響全域性的陣列
Array.prototype.func = () => {}

export default {
console
}

有無 副作用 的判斷，可以決定 tree-shaking 的優化程度，舉個例子：

  • 我現在引入 a.js 但是我不用他的 console 函式，那麼在優化階段我完全可以不打包 a.js 這個檔案。
  • 我現在引入 b.js 但是我不用他的 console 函式，但是我不可以不打包 b.js 這個檔案，因為他有 副作用 ，不能不打包。

sideEffects的使用

sideEffects 可以在 package.json 中設定：

// 所有檔案都有副作用，全都不可 tree-shaking
{
 "sideEffects": true
}
// 沒有檔案有副作用，全都可以 tree-shaking
{
 "sideEffects": false
}
// 只有這些檔案有副作用，
// 所有其他檔案都可以 tree-shaking，
// 但會保留這些檔案
{
 "sideEffects": [
  "./src/file1.js",
  "./src/file2.js"
 ]
}

優化體積

當我把 sideEffects 設定成 true 之後，整個打包體積增加了 100k ，說明預設的 false 還是有用的。。

結語

我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那我們們可以交朋友，一起摸魚哈哈，摸魚群，加我請備註【思否】

image.png

相關文章