浅谈性能优化之Tree Shaking

前端技术发展太快，感受一天不努力就要被超越。这不, 最近在写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目前已经集成在不少打包工具中了，你们也不妨一试。