rsbuild

RS构建

英语 |葡萄牙语 | 简体中文

Rsbuild 是一款由 Rspack 提供支持的高性能构建工具。它提供了一组精心设计的默认构建配置，提供开箱即用的开发体验，并可以充分释放 Rspack 的性能优势。

Rsbuild 提供了丰富的构建功能，包括 TypeScript、JSX、Sass、Less、CSS Modules、Wasm 等的编译。它还支持模块联合、图像压缩、类型检查、PostCSS、Lightning CSS 等。

比较

Rsbuild 是一个与 Vite、Create React App 或 Vue CLI 同等的构建工具。它们都配有内置开发服务器、命令行工具和合理的构建配置，以提供开箱即用的体验。

CRA / Vue CLI

您可以将 Rsbuild 视为 Create React App 或 Vue CLI 的现代化版本，具有以下主要区别：

• 底层捆绑器从 Webpack 切换为 Rspack，提供 5 到 10 倍的构建性能。

• 它与前端 UI 框架解耦，通过插件支持所有 UI 框架，包括 React、Vue、Svelte、Solid 等。

• 它提供了更好的可扩展性。您可以通过配置、插件 API 和 JavaScript API 灵活扩展 Rsbuild。

维特

Rsbuild 与 Vite 有很多相似之处，都是为了改善前端开发体验。主要区别是：

• 生态系统兼容性：Rsbuild 与大多数 webpack 插件和所有 Rspack 插件兼容，而 Vite 与 Rollup 插件兼容。如果您当前正在使用 webpack 生态系统中的更多插件和加载器，那么迁移到 Rsbuild 将相对容易。

• 生产一致性：Rsbuild 在开发和生产构建期间使用 Rspack 进行捆绑，从而确保开发和生产输出之间的高度一致性。这也是 Vite 通过 Rolldown 想要实现的目标之一。

• Module Federation ：Rsbuild 团队与 Module Federation 开发团队紧密合作，为 Module Federation 提供一流的支持，帮助您开发具有微前端架构的大型 Web 应用程序。

表现

Rsbuild 可以充分利用 Rspack 的构建性能。以下是构建 1000 个 React 组件所需的时间：

以上数据来自性能比较基准。

特征

Rsbuild具有以下特点：

• 易于配置：Rsbuild 的目标之一是为 Rspack 用户提供开箱即用的构建功能，允许开发人员以零配置启动 Web 项目。此外，Rsbuild 提供语义构建配置，以减少 Rspack 配置的学习曲线。

• 性能导向：Rsbuild 集成了社区中基于 Rust 的高性能工具，包括 Rspack、SWC 和 Lightning CSS，以提供一流的构建速度和开发体验。

• 插件生态系统：Rsbuild拥有轻量级的插件系统，包含一系列高质量的官方插件。此外，Rsbuild 与大多数 webpack 插件和所有 Rspack 插件兼容，允许用户利用 Rsbuild 中现有的社区或内部插件，而无需重写代码。

• 稳定的工件：Rsbuild 的设计非常注重构建工件的稳定性。它确保开发和生产构建中的工件之间的高度一致性，并自动完成语法降级和polyfill注入。 Rsbuild 还提供用于类型检查和工件语法验证的插件，以防止生产代码中的质量和兼容性问题。

• 与框架无关：Rsbuild 不与任何前端 UI 框架耦合。它通过插件支持 React、Vue、Svelte、Solid 和 Preact 等框架，并计划在未来支持来自社区的更多 UI 框架。

生态系统

Rsbuild 为更高级别的框架和工具提供 JavaScript API 和插件 API。例如，我们基于Rsbuild实现了Rspress和Rslib，充分利用了它的能力和生态系统。

下图说明了 Rsbuild 与生态系统中其他工具之间的关系：

入门

要开始使用 Rsbuild，请参阅快速入门。

链接

• Rspack：一个基于 Rust 的快速 Web 捆绑器。

• Rspress：基于 Rsbuild 的快速静态站点生成器。

• Rsdoctor：Rspack 和 webpack 的一站式构建分析器。

• Rslib：由 Rsbuild 提供支持的库构建工具。

• Modern.js：基于 Rsbuild 的渐进式 React 框架。

• Awesome-rspack：与 Rspack 和 Rsbuild 相关的精彩内容的精选列表。

• rspack-examples：Rspack、Rsbuild、Rspress 和 Rsdoctor 的示例。

• Storybook-rsbuild：由 Rsbuild 提供支持的 Storybook 生成器。

• rsbuild-plugin-template：使用此模板创建您自己的 Rsbuild 插件。

• rstack-design-resources：Rspack、Rsbuild、Rspress 和 Rsdoctor 的设计资源。

贡献

欢迎新贡献者！

请阅读贡献指南。

行为守则

本仓库采用了字节跳动开源行为准则。请查看行为准则了解更多详情。

社区

快来 Discord 上与我们聊天吧！ Rspack / Rsbuild 团队和用户在那里很活跃，我们一直在寻找贡献。

质量

Rsbuild 使用 Web Infra QoS 来观察关键指标的趋势，例如捆绑包大小、编译速度和安装大小。

制作人员

Rsbuild 的一些实现从社区中的优秀项目中汲取了灵感。我们谨向他们表示感谢：

• 部分插件的实现参考了create-react-app。

• 一些实用函数引用自 html-webpack-plugin。

• 部分API的设计参考了vite。

此 Rsbuild 网站由 Netlify 提供支持。

执照

Rsbuild 根据 MIT 许可证获得许可。