Tree Shaking

Tree Shaking

前言

这里的Tree Shaking指的是基于WebPack的。

一、什么是Tree Shaking？

Tree Shaking是基于ES6 module的技术，通过Tree Shaking可以将工程中不会执行的代码和引入后没有用到的部分模块进行删除。

之所以说Tree Shaking是基于ES6 module，是因为ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。

二、Tree Shaking的过程

首先，webpack对代码进行标记，主要是对 import & export 语句标记为 3 类：

• 所有 import 标记为 /* harmony import */
• 所有被使用过的 export 标记为/* harmony export ([type]) */，其中 [type] 和 webpack 内部有关，可能是 binding, immutable 等等
• 没被使用过的 export 标记为/* unused harmony export [FuncName] */，其中 [FuncName] 为 export 的方法名称

然后，而识别代码未使用标记并完成 tree-shaking 的 其实是 UglifyJS等工具。