构建打包工具Rollup.js入门指南

最近在看Vue源码的时候发现一个新的打包工具Rollup.js，之前没有听说过这个工具，也不了解Rollup.js相比于常用的打包工具webpack有什么异同和优势，随后查了一下了解到Vue，React，D3，Three.js，Moment源码里都有它的身影，Rollup到底什么？这篇文章带你走进Rollup的世界。

因为笔者习惯在学习新东西的时候，先从已经了解掌握类似功能的东西出发，寻找差异点，由浅入深，渐进学习，故此篇先从耳熟能详的webpack开始讲起。

webpack的几大特性

代码拆分

在webpack中，代码分离是最引人注目的特性之一。 因为对于前端而言，资源包与依赖文件体积过大，将会直接影响性能。 尤其是在移动互联网时代，大文件的加载问题也会使得用户体验直线下降，所以如何拆分代码，按需加载是目前很多应用所面临的问题。 在webpack的实现中，通过代码拆分功能将大的资源和依赖文件进行拆解，从而使得当用到某些资源时，能够就只加载这些文件，而避免加载无用资源，使用合理的话，会极大影响加载时间，提示用户体验。

目前webpack常用的代码分离方法有三种：

• 入口起点：使用 entry 配置手动地分离代码。

• 防止重复：使用 SplitChunksPlugin 去重和分离 chunk。

• 动态导入：通过模块中的内联函数调用来分离代码。

静态模块打包

在webpack的官网上写道，webpack是一个现代JavaScript 应用程序的静态模块打包器，能够 打包所有的资源，脚本，图片，样式表等一系列内容均可打包，这也是很多人选择使用webpack基本诉求。

在webpack实现各类资源打包时，由于webpack 自身只理解 JavaScript，所以对于除了JavaScript之外的资源需要使用 loader 让 webpack 能够去处理。 loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块 ，然后就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack的loader 可以将所有类型的文件，都转换为应用程序的依赖图和最终的打包结果可以直接引用的模块。 目前在官网提供了很多的loader，当然你有兴趣可以写一个自己的loader，通过自定义加载去使用。

插件机制

在webpack中，插件可以完成更多 loader 不能完成的功能，webpack内部 以插件的形式提供了灵活强大的自定义 api 功能，其本身暴露了webpack在运行的整个生命周期钩子函数，从而方便注册插件和使用插件，可见webpack的插件是直接对整个构建过程其作用。

Rollup的特点

JavaScript 模块打包器

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如一些后台语言的编译功能，将代码压缩成一个 library 或应用程序，Rollup 对代码模块使用新的ES6 版本中的标准化格式，并非是 CommonJS 和 AMD这种自定义的解决方案。

Tree-shaking

Tree-shaking, 也被称为 "live code inclusion" ，指清除在项目中没有实际 用到的冗余代码 。相比于Webpack和Browserify使用的CommonJS模块机制，Rollup中使用ES6 版本中的Modules标准格式编写模块代码，使得Rollup对代码做静态分析和从模块中删除无用的代码时更加高效，更容易。

Vue的作者尤雨溪在知乎里回答，关于Rollup之所以能高效的用Tree-shaking来消除无用的代码主要为以下四个原因。