rollup vs webpack #43
Description
各维度对比
构建基础
-
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，可以更好的开发调试