这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战
Tree-shaking 的本意
本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 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消除大法
Dead Code 一般具有以下几个特征
•代码不会被执行，不可到达
•代码执行的结果不会被用到
•代码只会影响死变量（只写不读）
传统编译型的语言中，都是由编译器将Dead Code从AST（抽象语法树）中删除，那javascript中是由谁做DCE呢？
首先肯定不是浏览器做DCE，因为当我们的代码送到浏览器，那还谈什么消除无法执行的代码来优化呢，所以肯定是送到浏览器之前的步骤进行优化。
其实也不是上面提到的三个工具，rollup，webpack，cc做的，而是著名的代码压缩优化工具uglify，uglify完成了javascript的DCE
(2) 再来看一下Tree-shaking消除大法
前面提到了tree-shaking更关注于无用模块的消除，消除那些引用了但并没有被使用的模块。
先思考一个问题，为什么tree-shaking是最近几年流行起来了？而前端模块化概念已经有很多年历史了，其实tree-shaking的消除原理是依赖于ES6的模块特性。
ES6 module 特点：
- 只能作为模块顶层的语句出现
- import 的模块名只能是字符串常量
- import binding 是 immutable的
ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。
所谓静态分析就是不执行代码，从字面量上对代码进行分析，ES6之前的模块化，比如我们可以动态require一个模块，只有执行后才知道引用的什么模块，这个就不能通过静态分析去做优化。
这是 ES6 modules 在设计时的一个重要考量，也是为什么没有直接采用 CommonJS，正是基于这个基础上，才使得 tree-shaking 成为可能，这也是为什么 rollup 和 webpack 2 都要用 ES6 module syntax 才能 tree-shaking。
总结： Tree Shanking（webpack） 依赖于 ES6 import 和 export 静态分析能力，可以在编译阶段将不会被执行，执行的结果不会被用到，代码只会影响死变量（只写不读） 的代码移除。
注意： Tree Shaking 失效的最主要的原因是函数存在副作用。首先理解下函数副作用，当我们调用某个函数时，该函数除了返回值之外，还产生附加的影响，例如修改全局变量，函数外的变量或修改参数等，称为存在副作用。
