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文件
资料: