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
等工具。