Tree-shaking总结
Tree-shaking
一. 什么是Tree-shaking
通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴
具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的
二. tree-shaking的原理
Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE（dead code elimination）。
Tree-shaking 是 DCE 的一种新的实现，Javascript同传统的编程语言不同的是，javascript绝大多数情况需要通过网络进行加载，然后执行，加载的文件大小越小，整体执行时间更短，所以去除无用代码以减少文件体积，对javascript来说更有意义。
Tree-shaking 和传统的 DCE的方法又不太一样，传统的DCE 消灭不可能执行的代码，而Tree-shaking 更关注宇消除没有用到的代码。下面详细介绍一下DCE和Tree-shaking。
- （1）先来看一下DCE消除大法
Like this one
编译器将Dead Code从AST（抽象语法树）中删除，那javascript中是由谁做DCE呢？
不是上面提到的三个工具，rollup，webpack，cc做的, 著名的代码压缩优化工具uglify，uglify完成了javascript的DCE,送到浏览器之前的步骤进行优化
rollup将无用的代码foo函数和unused函数消除了，但是仍然保留了不会执行到的代码，而webpack完整的保留了所有的无用代码和不会执行到的代码
右侧最终打包结果中都去除了无法执行到的代码，结果符合我们的预期
- (2) 再来看一下Tree-shaking消除大法
更关注于无用模块的消除，消除那些引用了但并没有被使用的模块
为什么tree-shaking是最近几年流行起来了？而前端模块化概念已经有很多年历史了，其实tree-shaking的消除原理是依赖于ES6的模块特性
import config from '../../../config'
require '../../../config'
所谓静态分析就是不执行代码，从字面量上对代码进行分析，ES6之前的模块化，比如我们可以动态require一个模块，只有执行后才知道引用的什么模块，这个就不能通过静态分析去做优化。
这是 ES6 modules 在设计时的一个重要考量，也是为什么没有直接采用 CommonJS，正是基于这个基础上，才使得 tree-shaking 成为可能，这也是为什么 rollup 和 webpack 2 都要用 ES6 module syntax 才能 tree-shaking
面向过程编程函数和面向对象编程是javascript最常用的编程模式和代码组织方式
- 函数消除实验 - rollup和webpack都可以实现去除无用代码
- 类消除实验 - rollup和webpack都不可以
总结
要求开发人员对代码的质量更高,更加严谨,不引用无用模块
