Webpack 中的 Tree Shaking

Tree Shaking

Tree shaking 用於描述移除JavaScript上下文中的未引用代碼(dead-code)。css

爲了更方便地理解tree shaking,咱們能夠將應用程序想象成一棵樹webpack

綠色表示實際用到的 source code(源碼) 和 library(庫),是樹上活的樹葉web

灰色表示未引用代碼,是秋天樹上枯萎的樹葉json

爲了除去死去的樹葉,你必須搖動這棵樹(shake this tree),使它們落下。ide

如何使用

  • 使用 ES2015 模塊語法(即 importexport )
  • 確保沒有compiler將ES2015模塊語法轉換爲CommonJS模塊(即 require )
  • package.json 文件中,添加 sideEffects 屬性,表示有反作用的模塊文件,使用false 表示全部模塊文件均無反作用
  • 經過將 mode 選項設置爲 production,啓用 minification (代碼壓縮) 和 tree shaking

反作用ui

在導入時會執行特殊行爲的代碼,而不是僅僅暴露一個 export 或多個 exportthis

舉例說明,例如 polyfill,它影響全局做用域(在各種的 prototype 中加入方法),而且一般不提供 export。prototype

或者使用 css-loader 而後 import css文件,雖然引入後並無進行使用,可是這些css文件是有反作用的(修改樣式)。code

所以對於這種有反作用的模塊,即便未被使用,也不能將其刪除。ip

sideEffects

// 全部模塊均無反作用
{
  "name": "your-project",
  "sideEffects": false
}

// 聲明有反作用的模塊
{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}

參考連接:

https://webpack.docschina.org/guides/tree-shaking/

相關文章
相關標籤/搜索