前言
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各项特性的高效打包器。