前端技术演化史

Rollup

Properties1
tags工程化, rollup, tree-shaking, esm, 库打包, 构建工具

6分钟阅读

🌳 Rollup

一句话定性

当 Webpack 在做”应用打包”时,Rollup 选择做”库打包”。它把 ES-Modules 当作一等公民,推广了 tree-shaking 概念,产出干净、无运行时噪音的代码。它是库作者的首选,也是 Vite 生产构建的底座。

一、它是什么 & 出现的时代

Rollup(2015,作者 Rich Harris,也是 Svelte 的作者)是一个 ESM 优先的模块打包器。

它和 Webpack 几乎同时代,但定位完全不同:Webpack 是”全能应用打包器”,什么都能塞;Rollup 是”专精库打包”——目标是产出体积小、结构干净、可被进一步优化的产物。

二、为什么会出现(解决上一代什么痛点)

Webpack 打出来的库太"脏"

  1. 运行时噪音:Webpack 的产物里塞了一套模块加载运行时(__webpack_require__ 之类的样板),对一个库来说是多余的负担。
  2. CommonJS 无法 tree-shaking:Browserify 和早期 Webpack 基于 CommonJS,而 CommonJS 是动态的,静态分析不出”哪些导出没被用到”,所以无法删除死代码。
  3. 库需要多格式输出:一个库要同时提供 ESM、CommonJS、UMD 等格式给不同消费者,Webpack 在这方面笨重。

Rollup 的洞察:ES Module 的 import/export 是静态的——编译期就能确定依赖关系,这是 tree-shaking 的前提。 既然 ES6-ES2015 带来了原生模块,就应该以它为基础重新设计打包器。

三、核心机制 & 为什么流行

两个关键词:ESM 优先 + tree-shaking

① ESM 优先 → 干净的产物 Rollup 把所有模块铺平(flatten) 进同一个作用域,而不是像 Webpack 那样把每个模块包成一个函数。结果是产物几乎没有运行时样板,读起来像手写的代码——这对库尤其重要。

② Tree-shaking — Rollup 推广的概念 因为 ESM 的 import/export 是静态的,Rollup 能在编译期精确分析”哪些导出真正被用到”,摇掉(shake) 没用到的代码(死代码):

库导出 { add, sub, mul, div }
你只 import { add }
        │  Rollup 静态分析:sub/mul/div 没被引用
        ▼
最终产物只含 add  ◄── tree-shaking

“tree-shaking”这个词就是 Rollup 带火的。它把代码想象成一棵树,摇一摇,枯叶(死代码)就掉了。

③ 多格式输出 一次配置,输出 ESM / CJS / UMD,完美适配库的分发需求。

为什么流行:几乎所有知名前端库(React、Vue 的部分构建、D3、各类 utility 库)都用 Rollup 打包。它是库作者的事实标准。

四、带来的新问题 / 副作用

专精的另一面是不全能

  1. 不擅长应用打包:开箱即用的 HMR、dev server、复杂资源处理(图片/CSS-in-JS 等)不如 Webpack 成熟,做大型应用要装一堆插件。
  2. code splitting 起步晚:早期对动态 import / 多入口的支持不如 Webpack。
  3. CommonJS 依赖要靠插件转换:ESM 优先的代价是,处理生态里大量的 CJS 包需要 @rollup/plugin-commonjs 适配。
  4. dev 体验:Rollup 本身是为生产构建设计的,直接拿来做 dev server 不够快——这正是 Vite 要补的位。

五、为什么会衰落 / 现状

Rollup 没有衰落,反而因为 Vite 而第二春。

Vite 的架构是:开发时用 esbuild 预构建依赖 + 浏览器原生 ESM(不打包),生产时用 Rollup 打包。 也就是说,Rollup 成了 Vite 生产构建的底座,被 Vite 的巨大用户量带飞。

现状(2026):

  • 库打包:Rollup 依然是首选(或其衍生 / 封装如 tsup、unbuild)。
  • 应用打包:通过 Vite 间接占据大量份额。
  • 同时,Rollup 团队推出了 Rolldown(Rust 重写的 Rollup,由 Vite 团队主导),准备统一 Vite 的 dev 和 prod,延续 Rust 工具链潮流。

六、对后续技术的影响(因果链)

[[ES6-ES2015]] 带来原生 [[ES-Modules]](静态 import/export)
        │
        ▼
Rollup:ESM 优先 + tree-shaking + 干净产物
        │  ① 推广 tree-shaking 概念 ──► 影响整个生态(连 Webpack 都跟进支持)
        │  ② 成为库打包之王 ──► React/Vue/D3 等都用它
        │  ③ 专精生产构建,dev 不够快
        │
        ▼
[[Vite]] 借用 Rollup 做生产构建底座
        │  开发:esbuild + 原生 ESM(no-bundle)
        │  生产:Rollup(成熟、tree-shaking 好)
        │
        ▼
Rollup 被 Vite 带飞,获得第二春
        │
        ▼
Rolldown(Rust 重写 Rollup)── 准备统一 Vite 的 dev/prod,延续 Rust 工具链潮

它和 Webpack 不是替代关系,是分工

Webpack 打应用,Rollup 打库。Vite 出现后,二者在”生产构建”上才真正交锋——而 Vite 选了 Rollup。

🔗 相关:前端工程化演进史 | Webpack | Vite | ES-Modules | Browserify | Svelte | 2018-2023 工程化时代

关系图谱

反向链接