Tree-Shaking 是一个前端术语，本意为摇树的意思，在前端术语中通常用于描述移除 JavaScript 上下文中没用的代码，这样可以有效地缩减打包体积。

使用：

• webpack 默认支持 (mode: 'production')。
• 在 babel.config.js 里设置 modules: false 。

要求：必须是 ES6 的语法，CJS 的方法不支持。

Tree Sharking 原理

Tree-Shaking 最早是由 Rich Harris 在打包工具 Rollup 提出并且实现的，其实在更早，Google Closure Compiler 也做过类似的事情。在 Webpack 2 中吸取了 Tree-Shaking 功能，并且在 Webpack 中得到实现。

无用代码消除 (Dead Code Elimination - DCE)

Tree-Shaking 的本质是消除无用的 JavaScript 代码。

Tree-Shaking 是 DCE 的一种新的实现，Javascript 同传统的编程语言不同的是，JavaScript 绝大多数情况是在浏览器中执行，需要通过网络进行加载，然后解析 JavaScript 文件再执行。

Tree-Shaking 和传统的 DCE 的方法又不太一样，传统的 DCE 消除不可能执行的代码：

• 程序中没有执行的代码，如不可能进入的分支，return 之后的语句等
• 导致 dead variable 的代码，写入变量之后不再读取的代码

和 DCE 不同的是，Tree-Shaking 更关注于消除没有用到的代码。

Webpack 是基于 ES6 Modules 静态语法解析的构建工具，Tree-Shaking 之所以能够在 Webpack 实现，依靠 ES6 Modules 静态解析的特性。ES6 的模块声明保证了依赖关系是提前确定的，使得静态分析成为可能，这样在 Webpack 中代码不需要执行就可以知道是否被使用，自然就知道哪些是无用的代码了。

ES6 Modules 特点：

• 只能作为模块顶层的语句出现
• ES6 中 import 和 export 是显性声明的
• import 的模块名只能是字符串常量