treeShaking和sideEffects详解

什么是treeShaking？

• treeShaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。

treeShaking有什么用？

• 至于说有什么用呢？它的作用就是将程序中没有用到的代码在打包编译的时候都删除掉，这样能减少打包后包的体积大小，减少程序执行的时长

和传统DCE（Dead Code Elimination）有什么区别？

• 传统DCE是消除不可能执行的代码，而treeShaking虽然也是DCE新的实现方式，但是它是通过消除没有用到的代码来达到目的

Dead Code的特征：

• 代码不会被执行，不可到达
• 代码执行的结果不会被用到
• 代码只会影响死变量（只写不读）

在JS中是什么在做DCE？

首先肯定不是浏览器做DCE，因为当我们的代码送到浏览器，那还谈什么消除无法执行的代码来优化呢，所以肯定是送到浏览器之前的步骤进行优化。传统DCE使用到的是代码压缩优化工具uglify来完成的；而treeShaking则是通过webpack来完成的；

什么是sideEffects？

其主要功能是让 webpack 去除 treeShaking 带来副作用的代码。怎么去理解这个副作用呢？副作用可以理解成某个模块执行时除了导出成员之外所作的事情，比如我们修改了window上的属性，或者提供某个polyfill；如果没有这些副作用的话那么webpack就会清除没有用的代码，也就是上面说的treeShaking。

sideEffects写法？

• true/false，false 为了告诉 webpack 我这个 npm 包里的所有文件代码都是没有副作用的
• 数组，数组则表示告诉 webpack 我这个 npm 包里指定文件代码是没有副作用的