tree-shaking是一種消除死代碼的性能優(yōu)化理論图焰，最初由rollup提出概念裆馒，目前支持的工具有：rollup僚稿，webpack2凡桥，closure complier等。
Tree shaking實現(xiàn)原理
- Tree shaking的本質(zhì)是消除無用的js代碼蚀同，同時它也是DCE(Dead Code Elimination)的一種新的實現(xiàn)缅刽；
- 與傳統(tǒng)語言不通的，JavaScript加載由于受網(wǎng)絡(luò)影響使得DCE具有更重要的意義蠢络，畢竟JS文件越小加載時間越短衰猛；
- 具體實現(xiàn)DCE的并不是之前提到的三個工具，而是代碼壓縮優(yōu)化工具uglify刹孔；
- tree-shaking是基于es6的模塊特性啡省，這也是該工具之前不能流行的原因；
uglify特性
- 函數(shù)消除：rollup與webpack2都可以實現(xiàn)髓霞，rollup相對效率更高卦睹；
- 類消除：rollup與webpack2都無法實現(xiàn)；
- rollup只處理函數(shù)和頂層的import/export變量方库，不能把沒用到的類的方法消除掉分预；
- uglify不能跨文件消除代碼；
tree-shaking副作用
side effects是指那些當(dāng)import的時候會執(zhí)行一些動作薪捍，但是不一定會有任何export笼痹。比如ployfill,ployfills不對外暴露方法給主程序使用配喳。
tree shaking 不能自動的識別哪些代碼屬于side effects，因此手動指定這些代碼顯得非常重要凳干，如果不指定可能會出現(xiàn)一些意想不到的問題晴裹。
webpack+uglify案例
// package.json
{
"devDependencies": [
"uglify-webpack-plugin": "latest"
]
}
// webpack.config.js
module.exports = {
plugins: [
new UglifyJsPlugin()
]
}
