树摇tree-shaking概述

tree-shaking是一种消除死代码的性能优化理论，最初由rollup提出概念，目前支持的工具有：rollup，webpack2，closure complier等。

Tree shaking实现原理

• Tree shaking的本质是消除无用的js代码，同时它也是DCE(Dead Code Elimination)的一种新的实现；
• 与传统语言不通的，JavaScript加载由于受网络影响使得DCE具有更重要的意义，毕竟JS文件越小加载时间越短；
• 具体实现DCE的并不是之前提到的三个工具，而是代码压缩优化工具uglify；
• tree-shaking是基于es6的模块特性，这也是该工具之前不能流行的原因；

uglify特性

• 函数消除：rollup与webpack2都可以实现，rollup相对效率更高；
• 类消除：rollup与webpack2都无法实现；
• rollup只处理函数和顶层的import/export变量，不能把没用到的类的方法消除掉；
• uglify不能跨文件消除代码；

tree-shaking副作用

side effects是指那些当import的时候会执行一些动作，但是不一定会有任何export。比如ployfill,ployfills不对外暴露方法给主程序使用。

tree shaking 不能自动的识别哪些代码属于side effects，因此手动指定这些代码显得非常重要，如果不指定可能会出现一些意想不到的问题。

webpack+uglify案例

// package.json
{
  "devDependencies": [
    "uglify-webpack-plugin": "latest"
  ]
}
// webpack.config.js
module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}