rollup vs webpack

[nmsn]

各维度对比

构建基础

• rollup 使用 esm 作为构建基础

• webpack 使用 cjs 作为构建基础（需要注入大量的辅助性代码，冗余的多）

• 因此 webpack 需要引入大量的代码来实现 require，modules.exports，export，让浏览器可以兼容cjs和esm语法，所以 webpack 打包时间会更长，包的大小会更大

• webpack 的 output.module 还处于实验阶段

• 因为 webpack 比 rollup 早出 2 年，诞生在 esm 标准出来前，commonjs出来后，当时的浏览器只能通过 script 标签加载模块

• script标签加载代码是没有作用域的，只能在代码内 用iife的方式 实现作用域效果

• 这就是webpack打包出来的代码 大结构都是iife的原因

• 并且每个模块都要装到function里面，才能保证互相之间作用域不干扰
  这就是为什么 webpack打包的代码为什么乍看会感觉乱，找不到自己写的代码的真正原因

• 关于webpack的代码注入问题，是因为浏览器不支持cjs，所以webpack要去自己实现require和module.exports方法（才有很多注入）（webpack自己实现polyfill）

• rollup诞生于esm标准出来后，就是针对esm设计的，也没有历史包袱，所以可以做到真正的“打包”（精简，无额外注入）

• chrome 63 支持 esm （2017.5）

插件

rollup 的 plugin 相当于 webpack 的 loader + plugin

• rollup 本身功能更简洁，额外功能需要引入插件来处理，如 rollup 本身不能处理 node_modules 引入的包，需要引入 @rollup/plugin-node-resolve，另外本身也不能处理 css 等非 js 文件，也需要引入插件
• webpack 内置了大量 loader 和 plugin，本身就可以处理一些非 js 文件，更加全面

tree-shaking

• rollup 本身使用 esm 作为构建基础，tree-shaking 不需要额外配置
• webpack 如果想要使用 tree-shaking，需要额外的配置
  • 使用 esm 模块语法
  • package sideEffects
  • 一个压缩插件 如 UglifyJSPlugin

开发

• rollup 需要 rollup-plugin-serve / rollup-plugin-livereload 插件来实现热重载
• webpack 默认有 devServer 的配置，需要引入 webpack-dev-server 插件

webpack 有 HMR 模块热替换，rollup 没有，这也是 webpack 更适合开发应用的原因之一，能够更好的开发调试

为什么 Rollup 没有 Hot Module Replacement

• 因为Rollup不提供任何web服务器，它总是生成一个产品包

为什么说 webpack 更适合应用开发，rollup 更适合库开发

如上文总结：

• rollup 打包更快，体积更小，适合库的开发
• webpack 能够 HMR，可以更好的开发调试

参考

• https://medium.com/js-imaginea/comparing-bundlers-webpack-rollup-parcel-f8f5dc609cfd
• https://betterprogramming.pub/the-battle-of-bundlers-6333a4e3eda9
• https://medium.com/@PepsRyuu/why-i-use-rollup-and-not-webpack-e3ab163f4fd3