什么是 Tree Shaking

image

Tree Shaking,是代码优化重要的一项,可以理解为通过工具”摇”我们的JS文件,将其中用不到的代码”摇”掉,是一个性能优化的范畴。

  • Tree Shaking本质是一种静态代码分析,将不用的静态代码模块,剔除出去。这就代表了,只有模块代码才会被剔除,而且只有es的模块类型,是编译后执行(虽然js是解释型语言,但其实es6模块化后,有预编译的阶段)预编译阶段引用模块,才能实现静态分析。如果是CommonJS规范模块的代码,模块是执行时才引用的,比如require(‘…’),则是不能Tree Shaking的。举个例子:
// model.js
export const a = () => {
if (false) {
  // ....
}
return 'a'
return 'some useless code'
}
export const b = () => false
// index.js
import {a} from 'model.js'
a()

这个时候,如果使用Tree Shaking,则可以剔除不用的模块b。只保留a模块,但是a模块内的无用代码,则不会被剔除。

再进一步,如果index.js中的代码是这样的:

// index.js
import {a} from 'model.js'
import {b} from 'model.js'
a()

a和b模块都引入了,但是b没有调用,则b也不会被剔除,所以Tree Shaking优化也是有限的,所以我们在代码开发的时候,要结合一些代码检查工具,移除代码中不用的模块,来进一步实现代码优化。