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 包里指定文件代码是没有副作用的

作者：24K纯帅豆
链接：https://www.jianshu.com/p/c6f50f955140
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

下面是自己的简短总结：

tree shaking: 去除无用代码

前提：1、必须使用ES6模块化 2、开启production环境
作用：减少代码体积

在package.json中配置

 "sideEffects":false
所有代码都没有副作用（都可以进行tree shaking）加上之后打包之后的build里面可能就没有css文件夹了。
问题：可能会把css / @babel/polyfill 等（副作用）文件干掉
所以要这样配置,这样的话就不会对css和less文件进行tree-shaking处理了
"sideEffects":["*.css","*.less"]

更多详情请阅读webpack官网：https://webpack.docschina.org/guides/tree-shaking/#root

最后

以上就是沉默发夹为你收集整理的treeShaking和sideEffects详解的全部内容，希望文章能够帮你解决treeShaking和sideEffects详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。