Webpack VS Rollup

前言

webpack和Rollup是现在最流行的模块打包器，那么这两者有什么区别，各自的使用场景又有什么不同呢？

特性

webpack

• webpack是一个模块打包器，它把所有的资源都视为一个模块，包括非JS和JSON资源，对于非JS和JSON等静态资源可以通过一些第三方loader或者自定义loader进行转换；
• webpack通过自己实现的__webpack_require__(moduleId)方法手动实现加载模块，并对已加载的模块进行缓存，对于非ESM的第三方模块的加载也毫无问题；
• 正如我上一篇博客讲到的那样，webpack对于模块的处理并不是平铺展开，而是把所有的模块维护到一个__webpack_modules__的数组中,并且通过自己实现的__webapck_require__方法去加载模块，所以打包出来的体积略大
• 当webpack处理程序时，它会递归地构建一个依赖关系图
• 可以将按需加载的模块进行分割，等到实际需要的时候再按需加载
• 冗余代码较多

Rollup

• Rollup是一个基于ESM的模块打包器，可以将项目中的细小模块打包成整块代码，使得划分的模块可以更好的运行在浏览器环境或者是Nodejs环境，不过Rollup对于静态资源的整合处理没有Webpack强大
• 由于是基于ES6,所以天然支持动态导入和tree-shaking，但是对于CommonJS模块需要借助插件rollup-plugin-commonjs解析成ES6代码后再处理
• 可以将所有的小文件打到一个bundle里，所有的代码都在一个函数作用域中，代码平铺展开，不压缩混淆的情况下，代码可读性依然很好
• 冗余代码少，执行快

优缺点

webpack

优点

• 模块化
• 静态资源整合
• 公共代码拆分
• 异步加载
• 支持热更新
• 社区生态更繁荣

缺点

• 配置复杂
• 冗余代码较多

Rollup

优点

• 基于ES6，天然支持动态导入和tree-shaking
• 文档精简，配置相对于webpack来说更简单
• 冗余代码少，执行快

使用场景

总的来说webpack更偏向于应用程序开发，Rollup偏向应用于JS库；如果你的应用场景中只是js代码，希望做ES转换，模块解析，可以使用Rollup。如果你的场景中涉及到css、html，涉及到复杂的代码拆分合并，建议使用webpack。

真实场景

使用Rollup的开源库

• Vue
• Vuex
• Vue-router
• React

使用webpack的开源项目

• ElementUI

结语

Rollup仅仅是一款ESM打包器，没有其他功能，例如Rollup中并不支持类似HMR这种高级特性。Rollup并不是要与Webpack全面竞争，而是提供一个充分利用ESM各项特性的高效打包器。