浅谈性能优化之Tree Shaking

1,811 阅读4分钟

前端技术发展太快,感觉一天不努力就要被超越。这不, 最近在写Angular2练习项目的时候,遇到了一个性能优化的技术点,叫做Tree Shaking。于是,我愉快地开始了学习之旅。

从技术实现上来说,它是依托于ES6提供的模块系统对代码进行静态分析,并将代码中的死代码(dead code)移除的一种技术。因此,利用Tree Shaking技术可以很方便地实现我们代码上的优化,减少代码体积。

背景

随着ES6在项目中运用的越来越广泛,很多人都已经开始使用ES6自带的模块系统进行编程。现在大家写稍微复杂一点的前端项目的时候,通常都会引入多个模块,如jquery、lodash等等。而这些第三方库中的很多功能其实可能只会用到一小部分。如果按照传统的打包方式进行打包的话,你最终的代码中将会有很多的冗余代码,有损前端性能。于是,Tree Shaking应运而生。

技术实现

Tree Shaking,从这个技术的命名十分形象,直译过来就是“摇树”的意思。在去除代码冗余的过程中,程序会从入口文件出发扫描所有的模块依赖,以及模块的子依赖,然后将它们链接起来形成一个“抽象语法树”(AST)。随后,运行所有代码,查看哪些代码是用到过的,做好标记。最后,再将“抽象语法树”中没有用到的代码“摇落”。这样一个过程后,就去除了没有用到的代码。

Tree Shaking

使用Rollup

提到Tree Shaking, 就不得不谈一下Rollup这个库了。Tree Shaking这个术语其实就是它命名出来的。Rollup号称是下一代ES6的模块化工具。它支持将用ES6模块化系统写的代码打包成CMD,AMD和IFEE等多种风格的模块,从而让浏览器或node能更好地支持。并且,在打包过程中,会使用Tree Shaking技术分析代码依赖,移除冗余代码。接下来我将针对Rollup这个库,来讲解一下在项目实践当中它的应用。

安装

你用常见的npm或者目前比较流行的yarn都可以进行安装:

npm install --save-dev rollup
//or
yarn add rollup --dev

配置文件

Rollup的配置文件相对来说是比较简单的,对于基础的打包工作,只要指定文件路口、出口以及打包的格式之后就可以了。

先创建一个名为rollup.config.js的配置文件:

export default {
  entry: 'app.js',
  dest: 'bundle.min.js',
  //打包格式
  format: 'umd',
  sourceMap: false,
}

然后执行命令:

rollup -c rollup.config.js

最后将会把app.js打包成bundle.min.js的文件。

Rollup官方提供了多种插件,可以实现很多个性化的需求。如:我们希望在去除代码冗余后,再使用uglify对代码进行压缩,可以使用rollup-plugin-uglify插件:

import uglify from 'rollup-plugin-uglify';

export default {
  ....
  plugins: [
    uglify()
  ]
}

在Webpck 中使用Tree Shaking

目前Webpack 2.0也已经开始支持Tree Shaking技术,如果需要在打包发布前用上Tree Shaking,不必再额外引入Rollup库了。要在webpack中使用,之前可能还会用到babel-preset-es2015-native-modules模块,但是现在只要在.babelrc文件中做出如下配置:

presets: [["es2015", { "modules": false }]]

就可以了,是不是很简单呢?

Rollup vs Webpack

另外,在我的学习过程中,曾经有一个疑问:如今Webpack已经集成了Tree Shaking,那么是否还有必要去使用Rollup呢?直到我读到了这篇文章:Webpack and Rollup: the same but different。引用文章中的一句总结:

Use webpack for apps, and Rollup for libraries

Webpack和Rollup的使用场景其实不太一样。Webpack功能十分强大,主要用于解决开发复杂SPA应用时面临的许多问题:如代码分离(code splitting)、静态资源引用、模块按需加载等。但对于Rollup来说,它则更加轻量级,主要是用来构建能够被开发者广泛使用的第三方JS库的。

问题

目前针对ES6的Tree Shaking技术,还不是特别成熟。特别是你需要处理的代码会产生副作用的时候,会导致Tree Shaking并不能很好地去除冗余。因此在具体的项目开发过程当中,还是建议提高代码编写的质量,减少冗余。例如利用一些工具,如eslint,jslint之类的检查策略,来删除一些没有用到的业务代码。另一方面,我们在项目中也可以采用一些进行优化过的第三方库。最后,静态导入包的过程,直接导入子模块,会比导入整个第三方库来得更合适,如:

import { map } from 'lodash/fp';
//BAD!
import { map } from 'lodash';

题外话

作为dead code elimination的一种方式,Tree Shaking目前已经集成在很多打包工具中了,大家也不妨一试。