Tree-shaking

Tree-shaking是webpack内置的一个优化，主要功能就是去除没有用到代码。因为JavaScript大多数是要通过加载的，加载的文件越小，性能越好，所以Tree-shaking对于优化JavaScript很有意义。

Tree-shaking是DCE（dead code elimination）的一种新特性，主要特点有：

代码不会被执行

代码执行结果不会被用到

代码只会影响死变量

简单概括就是dead code，无用的，死的代码。

Tree-shaking主要依赖于ES6的模块化import和export，我们都知道ES6的module只能是顶层出现，和运行时无关，不能运行时加载，Tree-shaking主要就是依靠这个基础进行静态分析，不执行代码就从字面量对代码进行分析。如果是require，需要执行后才知道有没有引用，就无法进行Tree-shaking。

我在一个testjs里面写了两个方法，在mainjs引入：

import {cookie, creatYear} from "./test";

然后我只调用cookie方法，打包出来的没有creatYear，如果我一个方法都不调用，那么cookie和creatYear都没有打包进去。

看着是很不错，但是也会出现一个问题，我在testjs里面调用了cookie方法，但是我mainjs里面只是引入，没有调用，打包出来的还是会把cookie方法打包进去，这就是Tree-shaking带来的副作用。

对于副作用，真正的理解很困难，不只是调用了函数，比如使用了原型链、给window加了属性、立即执行函数引用了外部变量等一些你觉得没有副作用的经过bable其它的打包一下，也有可能会产生副作用。当然，这只是在说webpack的机制，如果是rollup等其它库，结果还会不同。所以当你觉得Tree-shaking无效的时候，可以用看看打包出来的代码是否有副作用。当然，这一块本人觉得还是当一条咸鱼忽略吧。

想解决这个问题很简单，webpack4开始，在pacakge.json里面添加一个配置：

"sideEffects": false

sideEffects主要是让 webpack 去除 tree shaking 带来副作用的代码。不管有没有副作用，只要没有被引用，都会被清除。但是会引申出另一个问题，如果配置了，那么很多简单引用都会被忽略，比如引入一个css。所以为什么那么多脚手架都不会去配置这个参数，并不能保证开发者能保证代码都没有副作用。

当然，webpack还给了配置参数，sideEffects可以是一个数组，指定文件没有副作用，不需要去过滤没有使用的副作用。话说回来，除非项目真的很严格，不然不建议配置，否则开发的时候没问题，打包之后出问题了，不知道这个配置的很可能会心态爆炸，定位不到问题。

Teee-shaking还有对于类的作用也会有问题，当我们没有引入babel的时候，遵循函数的方式进行shaking，但是引入babel之后，转化成ES5，就会产生副作用，从而没办法达到想要的结果。

以前一直只认识到Tree-shaking只要用import和export导出导入就没有什么问题，慢慢的才知道这一块很难。编译解析的原理和不同工具之间也会有不同结果。除了简单使用，根本不敢应用于开发项目。

（完）

Coding 个人笔记