Webpack、Rollup、Vite、Rspack 与 Rolldown

Webpack、Rollup、Vite、Rspack 与 Rolldown

这篇笔记还在编辑中，内容可能会继续补充、调整或重写。

先区分工具角色

“构建工具”不是单一能力。一次构建可能同时包含模块解析、语法转换、依赖图分析、打包、代码分块、压缩、开发服务器和插件编排。比较工具前应确认是在比较完整工具链、底层打包器，还是编译器。

  • Webpack：成熟的应用打包器，Loader、Plugin 和 Module Federation 生态广，适合已有大量 Webpack 定制的项目。
  • Rollup：以 ESM 和可预测产物见长，长期被大量库构建和上层工具使用。
  • Vite：面向应用和框架的开发与构建工具，提供开发服务器、HMR、插件和统一配置入口。
  • Rspack：使用 Rust 实现，强调 Webpack 配置与生态兼容，以及大型项目的迁移性能收益。
  • Rolldown：使用 Rust 实现、兼容 Rollup 插件模型的打包器，也是 Vite 8 的默认底层构建引擎。

Vite 的版本边界

旧版 Vite 在开发阶段主要依赖 esbuild 处理依赖预构建和部分转换，在生产阶段使用 Rollup。从 Vite 8 开始，开发与生产链路统一转向 Rolldown，并使用 Oxc 相关工具完成转换和压缩。因此，“Vite 等于原生 ESM 开发服务加 Rollup 生产构建”只适用于旧版本。

迁移旧项目时，应检查插件是否依赖 Rollup 的边缘行为、rollupOptions 是否被兼容转换，以及构建结果的 Chunk、CSS 和 Source Map 是否变化。

选型维度

不要只用“应用选 Webpack，库选 Rollup”做决定。至少比较：

  1. 目标是浏览器应用、SSR 应用、组件库还是 Node.js 包
  2. 开发启动、HMR、冷构建和增量构建规模
  3. 框架官方集成与现有插件兼容性
  4. ESM/CJS、CSS、Worker、Wasm 和静态资源需求
  5. 代码分块、缓存、调试和 Source Map 能力
  6. 团队定制插件数量、迁移预算和退出路径

如果现有 Webpack 工程稳定且高度定制，迁移节省的构建时间未必覆盖兼容验证成本。新项目则通常应优先采用框架官方推荐的工具链。

实践：用同一项目比较

准备包含以下特征的最小项目：

  • 一个同步入口和一个动态导入
  • Vue 或 React 组件与 CSS
  • 图片、字体和 Worker
  • 一个具有副作用的模块
  • 一个自定义转换插件

分别记录开发启动、热更新、生产构建、缓存构建和产物体积。比较时固定 Node.js、依赖版本、机器和缓存状态，不能把不同条件下的一次运行当成结论。

验收标准

  • 能区分 Vite、Rolldown、Rollup、Oxc 各自承担的角色
  • 能说明结论适用的工具主版本
  • 同一示例在候选工具中功能和测试结果一致
  • 对比包含兼容性和迁移成本，而不只是构建速度
  • 能从依赖图、插件钩子和构建日志定位一次失败

参考资料