正文

tree shaking 依賴于ES Module 的靜態(tài)語(yǔ)法分析，在項(xiàng)目編譯時(shí)移除無(wú)用的代碼以減少文件體積。

usedExports

在文件中，我們可能定義了變量但是暫時(shí)又沒(méi)有用到，這樣會(huì)造成空間的浪費(fèi)。在 mode 為 production 時(shí)，會(huì)默認(rèn)做一些配置，將無(wú)用的代碼刪除。為了看到?jīng)]有做處理時(shí)編譯后的文件效果，在 webpack 中做如下配置。

module.exports = {
  // 其他配置省略
  mode: 'development',
  optimization: {
    minimize: false,
    usedExports: false,
  },
};

在這種配置情況下，當(dāng)存在沒(méi)有用到的變量時(shí)，還是照原樣編譯到了 js 文件中。

useExports為false

想要移除掉 js 文件中的無(wú)用代碼，開(kāi)啟 minimize 通過(guò) usedExports 配置

module.exports = {
  // 其他配置省略
  mode: 'development',
  optimization: {
    minimize: true,
    usedExports: true,
  },
};

這樣編譯后就將沒(méi)有用到的變量 username 和 foo 函數(shù)都移除掉了

useExports為true

sideEffects

這時(shí)候仍存在一個(gè)問(wèn)題，如果通過(guò)模塊化引入另一個(gè)js文件，即使沒(méi)有被使用，useExports 也不會(huì)進(jìn)行 tree shaking。

// index.js
import './format.js';
// format.js
export function timeFormat() {
  return '2022-01-01';
}

比如上面這段代碼，通過(guò) import 語(yǔ)句引入 format.js，但 format.js 導(dǎo)出的函數(shù)沒(méi)有被使用。

import導(dǎo)入文件沒(méi)有treeShaking

此時(shí)仍然對(duì)于 import 語(yǔ)句進(jìn)行了編譯，我們希望在引入的文件中也進(jìn)行 tree shaking，刪除無(wú)用的代碼，這個(gè)時(shí)候在 package.json 中配置 sideEffects 屬性來(lái)處理。

// package.json 其他配置省略
{
    "sideEffects": false
}

sideEffects 用于告知 webapck 編譯器哪些模塊有副作用

• 定義為 false，表示所有的模塊都不存在副作用，不需要用到的時(shí)候直接刪除
• 定義為數(shù)組，告知有副作用的模塊，該模塊中有副作用的代碼會(huì)被保留，沒(méi)有副作用且沒(méi)有使用到的代碼會(huì)被刪除。

sideEffect為false

這樣引入的 js 文件沒(méi)有被使用，進(jìn)行了 tree shaking，可是 css 資源通過(guò) import 引入也被刪除了，也不會(huì)編譯生成對(duì)應(yīng)的 css 文件，解決方式可以選擇在 sideEffects 屬性中定義數(shù)組，或者處理 css 文件的 loader 中配置（推薦）。

// package.json
{
    "sideEffects": [
        "**.css"
    ],
}
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        // 其它配置省略
        sideEffects: true,
      },
    ],
  },
};

在這種情況下，在 js 文件中引入的 css 文件就不會(huì)直接被移除掉

sideEffect保留css

PurgeCss

不過(guò) sideEffects 屬性是不會(huì)幫助 css 文件內(nèi)部進(jìn)行 tree shaking 操作的，比如沒(méi)有在代碼中創(chuàng)建 div 和 h1 標(biāo)簽，但這段 css 代碼也沒(méi)有被移除。

想要在css代碼中進(jìn)行 tree shaking 可借助 purgecss-webpack-plugin。通過(guò) npm install purgecss-webpack-plugin -D 安裝后在 package.json 中配置。

• paths：表示要檢測(cè)哪些目錄下的內(nèi)容需要被分析
• glob：對(duì)某些文件、文件夾通過(guò)正則表達(dá)式來(lái)進(jìn)行匹配， webpack或其他插件已經(jīng)安裝過(guò)
• noddir：表示匹配文件，不匹配文件夾
• safelist：默認(rèn)情況下，Purgecss會(huì)將html、body標(biāo)簽的樣式移除掉，如果希望保留，需要在safelist中添加

這樣 css 文件內(nèi)部也會(huì)移除掉無(wú)用的代碼

PurgeCss

總結(jié)

在項(xiàng)目性能優(yōu)化時(shí)，可以通過(guò) tree shaking 來(lái)做以下操作

• optimization 中配置 usedExports 為 true，移除 js 無(wú)用代碼。
• ( 這也是 mode 為 production 時(shí)的默認(rèn)配置 )
• package.json 中配置 sideEffects 為 false，css 在 loader 中設(shè)置 sideEffects 為 true，對(duì)模塊進(jìn)行優(yōu)化。
• 使用 PurgeCss 來(lái)對(duì) css 文件內(nèi)部的代碼進(jìn)行 tree shaking。

以上就是使用tree shaking 移除無(wú)用代碼的詳細(xì)內(nèi)容，更多關(guān)于tree shaking移除無(wú)用代碼的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論