ttree shaking就是将项目中没有用到的代码,或者是永远不会执行的代码,在Uglify阶段查出,不打包到bundle中。
只支持ES6 Module代码。在production 环境默认开启。
一、DCE
DCE,擦除无用的代码,擦除类型有:
- 不会被运行的代码。
- 没有被使用的代码。
这几类代码都会被tree shaking擦除。
二、原理
es6引入一个模块的特点是只能在顶部引入,不能在代码块中引入,并且抛出的是常量,不能再外部设置该常量的内容。
原理过程是在编译阶段对代码进行分析,对无用代码进行标记,在Uglify阶段进行擦除。
但是对于有副作用的代码,虽然没有引入,但是不会被删除,比如ploify,没有import,但是全局使用了,一旦删除,将会使整个程序出错。
我们可以在package.json中添加side-effect-free属性,该值为flase,就代表整个程序中不存在有副作用的代码,tree-shaking可以尽情的删除,设置为数组,数组的值为文件路径,表示数组中的文件代码中存在副作用,tree-shaking跳过这些文件。
三、sideEffectFree和usedExports
usedExports是tree-shaking使用的检测代码中是否有副作用。
usedExports(tree-shaking)和sideEffectFree是两种不同的优化方式。
区别:
sideEffectFree可以跳过整个文件和其子树,但是usedExports不能,所以sideEffectFree更加高效。