Tree shaking 用於描述移除JavaScript上下文中的未引用代碼(dead-code)。css
爲了更方便地理解tree shaking,咱們能夠將應用程序想象成一棵樹。webpack
綠色表示實際用到的 source code(源碼) 和 library(庫),是樹上活的樹葉。web
灰色表示未引用代碼,是秋天樹上枯萎的樹葉。json
爲了除去死去的樹葉,你必須搖動這棵樹(shake this tree),使它們落下。ide
ES2015
模塊語法(即 import
和 export
)require
)package.json
文件中,添加 sideEffects
屬性,表示有反作用的模塊文件,使用false
表示全部模塊文件均無反作用mode
選項設置爲 production
,啓用 minification
(代碼壓縮) 和 tree shaking
反作用ui
在導入時會執行特殊行爲的代碼,而不是僅僅暴露一個 export
或多個 export
。this
舉例說明,例如 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" ] }
參考連接: