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。

babel, webpack打包, uglifyJs

这三项东西东西是在我们开发中几乎绕不过去东西。而tree-shaking的关键点就在第一步，babel

虽然我不太了解webpack内部的运行机制（看过运行顺序的相关文章，但一直是懵比状态），但是看过这么多的文章后，上面三项的基本运行顺序还是理解的：

就是babel-loader先去处理js文件，处理过后，webpack进行打包处理，最后uglifyjs进行代码压缩。而关键就是babel怎么去处理js文件

 

资料：

Tree-shaking及副作用 - 知乎Tree-shaking是webpack内置的一个优化，主要功能就是去除没有用到代码。因为JavaScript大多数是要通过加载的，加载的文件越小，性能越好，所以Tree-shaking对于优化JavaScript很有意义。 Tree-shaking是DCE（dead …https://zhuanlan.zhihu.com/p/215891106

tree-shaking实战 - 简书tree-shaking是一个在前端领域比较熟知的东西了。在没有深入了解前，一直以为他在项目中发挥了很大的作用。但是在看了许多文章说tree-shaking并没有什么卵用后，...https://www.jianshu.com/p/7994b1fc6dfe