TypeScript Rsbuild 字节出品的极速前端构建工具

前端构建工具年年换，Vite、webpack、esbuild 各有拥趸，但配置复杂度和构建速度的权衡始终没被彻底解决。Rsbuild 是字节跳动（web-infra 团队）开源的现代构建工具，底层由 Rust 写的 Rspack 驱动，目标是把开箱即用、配置简单、构建飞快同时做到，而且不绑定任何前端框架。

项目基本信息

一、项目介绍

Rsbuild 是一个面向 Web 应用的现代构建工具，由高性能的 Rust 打包器 Rspack 提供动力。它在构建快、产物优的同时，把配置做得简单、一致、可扩展。你可以零配置启动一个 Web 项目，也能通过语义化的构建配置 API 精细控制，大幅降低 Rspack 的学习曲线。它不耦合任何 UI 框架，通过插件支持 React、Vue、Svelte、Solid、Preact 等。

二、核心优势

第一，易配置。Rsbuild 给 Rspack 用户提供开箱即用的构建能力，零配置即可起步，并提供语义化 API 降低门槛。第二，性能优先。它集成了 Rspack、SWC、Lightning CSS 等高性能 Rust 工具，带来一流的构建速度和开发体验。第三，插件生态。轻量插件系统，兼容绝大多数 webpack 插件和全部 Rspack 插件，已有社区或内部插件无需重写。第四，产物稳定。自动处理语法降级和 polyfill 注入，开发和生产产物一致，并提供类型检查和产物语法校验插件。第五，框架无关。不绑定 UI 框架，通过插件接入主流框架。

三、适用场景

新项目想零配置起步、又不想被某个框架锁死时，Rsbuild 是理想选择。老项目如果想从 webpack 迁移到更快的底层，又能复用大量现有 webpack 插件，迁移成本也低。它同样是 AI 编程代理友好的工具链——Rstack（Rsbuild 所属的现代 JS 工具链）还提供了 agent-skills，方便代理理解和调用。

四、安装教程

通过 npm 或 pnpm 安装核心包：

npm create rsbuild@latest

或手动安装：

npm install @rsbuild/core

需要 Node.js 运行环境。创建项目后，常用命令是 rsbuild dev 启动开发服务器、rsbuild build 产出生产包。常见报错多来自 Node 版本不兼容或缺少平台相关的原生依赖，建议先确认 Node 版本满足 Rspack 要求。

五、使用示例

用官方脚手架新建项目：

npm create rsbuild@latest my-app
cd my-app
npm run dev

一个最小化的 rsbuild.config.ts 大致如下：

import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  html: {
    title: 'My App',
  },
});

执行 npm run build 即可得到优化后的生产产物。需要 React 或 Vue 等框架支持时，安装对应插件（如 @rsbuild/plugin-react）即可。

六、常见问题

问：Rsbuild 和 Vite 是什么关系？答：两者都追求快和简单，Rsbuild 底层用 Rust 的 Rspack，并兼容大量 webpack 插件。问：能复用 webpack 插件吗？答：兼容绝大多数 webpack 插件和全部 Rspack 插件。问：产物跨环境一致吗？答：Rsbuild 强调产物稳定性，自动处理语法降级和 polyfill，开发与生产产物一致。问：支持哪些框架？答：React、Vue、Svelte、Solid、Preact 等，通过插件接入。

七、总结

Rsbuild 把快和简单真正拧到了一起：Rspack 的 Rust 性能打底，零配置和语义化 API 降低心智负担，又不绑架框架。对于想要现代构建体验又不想被工具链拖垮的团队，它是 Vite 或 webpack 之外一个很务实的候选。