前端技术发展太快，感觉一天不努力就要被超越。这不, 最近在写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都可以进行安装:

1
2
3

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,
}

然后执行命令：

1	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技术，不必再使用Rollup库了。如果需要在webpack中使用，之前可能还会用到babel-preset-es2015-native-modules模块，但是现在只要在.babelrc文件中做出如下配置：

1	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之类的检查策略，来删除一些没有用到的业务代码。另一方面，我们在项目中也可以采用一些进行优化过的第三方库。最后，静态导入包的过程，直接导入子模块，会比导入整个第三方库来得更合适,如：

1
2
3

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

题外话

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

浅谈性能优化之Tree Shaking