正文

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

usedExports

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

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

在這種配置情況下，當存在沒有用到的變量時，還是照原樣編譯到了 js 文件中。

useExports為false

想要移除掉 js 文件中的無用代碼，開啟 minimize 通過 usedExports 配置

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

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

useExports為true

sideEffects

這時候仍存在一個問題，如果通過模塊化引入另一個js文件，即使沒有被使用，useExports 也不會進行 tree shaking。

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

比如上面這段代碼，通過 import 語句引入 format.js，但 format.js 導出的函數(shù)沒有被使用。

import導入文件沒有treeShaking

此時仍然對于 import 語句進行了編譯，我們希望在引入的文件中也進行 tree shaking，刪除無用的代碼，這個時候在 package.json 中配置 sideEffects 屬性來處理。

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

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

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

sideEffect為false

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

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

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

sideEffect保留css

PurgeCss

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

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

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

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

PurgeCss

總結(jié)

在項目性能優(yōu)化時，可以通過 tree shaking 來做以下操作

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

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

最新評論