理解:Tree Shaking就是對于哪些沒有使用的js就不打包
(https://webpack.js.org/guides/tree-shaking/)
注意:Tree Shaking只支持ES Module語法(即通過import引入 export導出).
項目結(jié)構(gòu)
webpack-demo
|- /dist
|- bundle.js
|- index.html
|- /node_modules
|- /src
|- index.js
+ |- math.js
|- package.json
|- webpack.config.js
mian.js
export function square(x){
console.log(x*x);
}
export function cube(x){
console.log(x+x);
}
index.js中引入
import {square} from './main.js'
square(2);
說明這時我們只使用了square方法，故意不使用cube方法然后讓Tree Shaking刪除它.
webpack.config.js添加
optimization: {
usedExports: true
}
注意：在mode為development模式下是不起作用的，應該在開發(fā)過程中是要不斷調(diào)試代碼的;在生產(chǎn)環(huán)境下打包你會發(fā)現(xiàn)cube方法已經(jīng)不見了,這是Tree Shaking起了作用.
