tree shaking對打包體積優化及作用

Posted on by

背景

大傢平時在查 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還是有用的。。

以上就是tree shaking對打包體積優化及作用的詳細內容，更多關於tree shaking打包體積優化的資料請關註WalkonNet其它相關文章！

推薦閱讀：