Rsbuild：由 Rspack 驱动的新一代高性能 Web 构建工具

2025年12月10日 32点热度 0人点赞 0条评论

Rsbuild——在瞬息之间构建你的 Web 应用

🧩 为什么我们最终选择了 Rspack / Rsbuild？

过去几年，我们的团队一直在寻找更快、更稳定、更适合大型项目的构建工具。从 Webpack 到 Vite，再到如今全面迁移至 Rspack/Rsbuild，这一路的工程经验让我们深刻意识到：

构建工具效率越高，开发迭代速度越快，产品上线越快，团队幸福感越高。

以下是我们迁移的背景与真实痛点。

💥 1. Vite 的速度瓶颈：大型项目中的隐形障碍

2020 年，我们从 Webpack 迁移到 Vite，那时它凭借秒级启动速度让人眼前一亮。但随着项目规模扩大，两个问题越来越突出：

🚧 1.1 开发环境和生产环境机制不一致

Vite 使用浏览器原生 ESM 进行开发，而生产阶段使用 Rollup 打包。
这会导致：

某些 module resolution 在 dev 和 build 中表现不一致
Dev 中正常，Build 后报错的情况偶尔出现
排查困难、不稳定性提升

虽然 Vite 计划通过 Rolldown 解决，但当前仍存在不少 issue。

🐢 1.2 大型项目的页面刷新速度过慢（真正的痛点！）

这不仅是我们遇到，社区也被困扰多年：

每次刷新页面可能需要 5～10 秒
DevTools 开着会更慢（尤其是大型 UI 界面）
页面可能发起 上千个资源请求
因为 Vite 会把每个模块作为一个网络请求发送到浏览器

更关键的是：
即使将来 Vite 使用 Rolldown，这种本质基于 ESM 的“未打包开发模式”带来的浏览器瓶颈仍然无法解决。

🔎 来自真实项目的体验

我们的页面在 Vite dev 下加载需要 10 秒以上，而迁移到 Rspack 后变成不到 2 秒。
性能提升约 500%。

这种级别的优化对大规模开发至关重要 —— 业务调试依赖页面刷新，测试人员远程联调也更流畅。

⚡ 2. Rspack 带来的飞跃式提升

Rspack 基于 Rust 实现，天生具备运行速度优势。迁移后速度提升立竿见影。

🚀 2.1 页面重载速度 500% 提升

Rspack 将模块 提前打包好
浏览器只需要加载极少的打包产物
避免了“上千请求”的 ESM 机制

结果是：

大型项目也能保持 1～2 秒的刷新速度
数万源文件依旧保持在可接受范围

Rspack 的页面加载速度曲线几乎是“平的”。
而 Vite 是呈阶梯式快速上升的。

⚙ 2.2 开发与生产结果完全一致

由于 dev 和 build 都使用 Rspack：

不会出现“不一致”问题
检查兼容性、polyfill、语法降级等在 dev 阶段就能看到
大幅减少线上事故隐患

举例：以前 Vite 项目中我们只在 build 阶段使用 @vitejs/plugin-legacy 转义，现在 Rsbuild 可以 dev/build 全部一致执行。

🔥 2.3 让人大呼意外的打包速度：快到离谱

真实测试：

设备	Vite build	Rsbuild build	提升
Macbook M3	42 秒	5 秒	-88%
Macbook 2019	121 秒	16 秒	-86%

当打包速度快到只需要几秒，你会真正感受到什么叫“开发流畅度爆表”。

🔗 2.4 Webpack 生态高兼容性

Rspack 为 Webpack 插件生态天然兼容，对于：

Figma 插件
Sketch 插件
各类老项目

迁移基本 0 成本。

如果你有大量 Webpack 自定义 loader/plugin，那么 Rspack 是目前最平滑的替代方案。

🛠 3. 为什么在大多数情况下选择 Rsbuild 而不是直接 Rspack？

Rspack 是底层打包器，类似 Webpack。

而 Rsbuild 是 Rspack 的高阶封装工具，类似于：

CRA
Vue CLI
Vite

相比直接使用 Rspack：

更少配置（semantic 配置结构更直观）
开箱即用（内置常用构建能力）
插件系统更轻量
标准化产物结构
更适合现代 Web 应用

简单理解：

Webpack → 直接换 Rspack
Vite / CRA / Vue CLI → 使用 Rsbuild 是更自然的迁移路径

🌟 4. Rsbuild 的核心特性（为什么它值得用）

✅ 性能优先

Rust + Rspack + SWC + Lightning CSS，全链路高性能。

✅ 配置友好、开箱即用

无需复杂配置即可启动大型项目。

✅ Webpack 与 Rspack 插件生态兼容

避免重复造轮子。

✅ 强一致性（dev/build 完全一致）

减少线上隐形风险。

✅ 支持所有主流前端框架

React / Vue / Svelte / Solid / Preact …
未来可期。

✅ 模块联邦一流支持

团队和 Webpack Module Federation 作者深度合作。

✅ 内置安全、性能、产物一致性策略

更适合构建企业级 WebApp。

🧱 5. Rsbuild 使用体验与配置能力

Rsbuild 的配置结构语义化、可扩展、可按需覆盖：

JavaScript

export default {
  plugins: [],
  dev: {},
  html: {},
  tools: {},
  output: {},
  resolve: {},
  source: {},
  server: {},
  security: {},
  performance: {},
  moduleFederation: {},
  environments: {},
};

export default {
  plugins: [],
  dev: {},
  html: {},
  tools: {},
  output: {},
  resolve: {},
  source: {},
  server: {},
  security: {},
  performance: {},
  moduleFederation: {},
  environments: {},
};