之前翻译过一篇文章，介绍了通过 ES2015 的解构赋值语法引入模块，可以让打包工具（browserify）最终编译出来的代码量最小化。
殊不知在 webpack 1.X 版本是无法利用该特性来避免引入冗余模块代码的，导致打出来的 bundle 文件大小难免略有臃肿。
今天则向大家介绍一个当红炸子鸡——Rollup.js，通过它可以让你的 bundle 最小化，有效减少文件请求大小——以至于连 vue 都迅速地转投它来打包模块。
Tree-shaking
在 Rollup 编译模块的过程中，通过 Tree-shacking 的方式来剔除各模块中最终未被引用到的方法，通过仅保留被调用到的代码块来缩减 bundle 的大小。
我们来看下官网的例子。
页面入口文件 main.js：
|
1 2 |
import { cube } from './maths.js'; console.log( cube( 5 ) ); // 125，即5的立方值 |
被引如的 math.js 模块如下：
|
1 2 3 4 5 6 7 8 9 10 |
// 注意这个方法在入口文件里没有被调用过 //最终会被 Rollup 剔除 export function square ( x ) { return x * x; } //入口文件需要调用到的求立方值的方法 export function cube ( x ) { return x * x * x; } |
通过 Rollup 打包之后如下：
|
1 2 3 4 5 6 7 8 9 |
'use strict'; function cube ( x ) { // rewrite this as `square( x ) * x` // and see what happens! return x * x * x; } console.log( cube( 5 ) ); // 125 |
可以很明显地体会到 Tree-shaking 的作用 —— Math 模块里有个从未用到的 square 方法，咱们在 bundle 文件里把它消灭掉了。
另外 TS 会抽取引用到的模块内容，将它们置于同一个作用域下，进而直接用变量名就可以访问各个模块的接口；而不像 webpack 这样每个模块外还要包一层函数定义，再通过合并进去的 define/require 相互调用。
当然这种方法需要 ES2015 的解构赋值语法来配合，多亏了它，Rollup 才能有效地对模块内容进行可靠的静态分析。
使用方式
安装自然不用说，走 npm 的老套路：
|
1 |
npm i rollup |
执行打包的方式也是简单到爆：
|
1 |
rollup src/main.js -o rel/bundle.js |
这意味着将入口文件 src/main.js 打包为 rel/bundle.js 文件。
很多时候我们开发走的 ES2015 模块语法，但最终编译出来的模块希望它能走 commonjs 语法，只需要加上 -f cjs 运行时参数（f for format）即可：
|
1 |
rollup src/main.js -o rel/bundle.js -f cjs |
当然，如果你想编译为其它格式，可以把 cjs 更换为：
|
1 |
amd / es6 / iife / umd |
我们分别来个参考~ 假设入口文件 src/main.js 如下：
|
1 2 3 4 5 6 7 |
var name = 'VaJoy'; function main () { console.log(name); } export default main; |
编译为各种模式后的bundle：
