<picture> <img alt="Rsbuild 横幅" src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427"> </picture>

Rsbuild

<p> <a href="https://discord.gg/XsaKEEk4mW"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat-square&logo=discord&colorA=564341&colorB=EDED91" alt="discord 频道" /></a> <a href="https://npmjs.com/package/@rsbuild/core?activeTab=readme"><img src="https://img.shields.io/npm/v/@rsbuild/core?style=flat-square&colorA=564341&colorB=EDED91" alt="npm 版本" /></a> <a href="https://npmcharts.com/compare/@rsbuild/core?minimal=true"><img src="https://yellow-cdn.veclightyear.com/835a84d5/4842f854-fc8d-48d6-930d-5981ee20b2c2.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="下载量" /></a> <a href="https://nodejs.org/en/about/previous-releases"><img src="https://yellow-cdn.veclightyear.com/835a84d5/eb284600-695e-42ba-aabc-d0b44cb9eae3.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="node 版本"></a> <a href="https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE"><img src="https://yellow-cdn.veclightyear.com/835a84d5/9209e4dc-7159-40ad-9de0-c646c34e9177.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="许可证" /></a> </p>

English | Portuguese | 简体中文

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。

Vite

Rsbuild 与 Vite 有许多相似之处，因为它们都旨在改善前端开发体验。主要区别如下：

• 生态系统兼容性：Rsbuild 兼容大多数 webpack 插件和所有 Rspack 插件，而 Vite 兼容 Rollup 插件。如果你目前使用的是 webpack 生态系统中的插件和加载器，迁移到 Rsbuild 会相对容易。
• 生产一致性：Rsbuild 在开发和生产构建过程中都使用 Rspack 进行打包，从而确保开发和生产输出之间的高度一致性。这也是 Vite 通过 Rolldown 希望实现的目标之一。
• 模块联邦：Rsbuild 团队与模块联邦开发团队密切合作，为模块联邦提供一流的支持，帮助你使用微前端架构开发大型 Web 应用。

🚀 性能

Rsbuild 的构建性能与原生 Rspack 相当。以下是构建 1000 个 React 组件所需的时间：

上述数据来自 performance-compare 基准测试。

🔥 特性

Rsbuild 具有以下特性：

• 易于配置：Rsbuild 的目标之一是为 Rspack 用户提供开箱即用的构建能力，允许开发者零配置启动 Web 项目。此外，Rsbuild 提供语义化的构建配置，降低 Rspack 配置的学习成本。

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

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

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

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

🎯 定位

除了作为构建工具使用外，Rsbuild 还为更高级别的解决方案提供通用构建能力，如 Rspress 和 Modern.js，使它们能够专注于开发自身的特定领域能力。

下图说明了 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 的设计资源。

🤝 贡献

欢迎新的贡献者！

请阅读贡献指南。

贡献者

<a href="https://github.com/web-infra-dev/rsbuild/graphs/contributors" target="_blank"> <table> <tr> <th colspan="2"> <br/> <img src="https://contrib.rocks/image?repo=web-infra-dev/rsbuild&columns=16&max=96"><br/><br/> </th> </tr> <tr> <td> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_90_days&owner_id=87694465&repo_ids=701750420&image_size=2x3&color_scheme=dark" /> <img alt="Contributors of web-infra-dev/rsbuild" src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_90_days&owner_id=87694465&repo_ids=701750420&image_size=2x3&color_scheme=light" /> </picture> </td> <td rowspan="2"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=new&period=past_90_days&owner_id=87694465&repo_ids=701750420&image_size=4x7&color_scheme=dark"> <img alt="New trends of web-infra-dev" src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=new&period=past_90_days&owner_id=87694465&repo_ids=701750420&image_size=4x7&color_scheme=light"> </picture> </td> </tr> <tr> <td> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_90_days&owner_id=87694465&repo_ids=701750420&image_size=2x3&color_scheme=dark" /> <img alt="Contributors of web-infra-dev/rsbuild" src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_90_days&owner_id=87694465&repo_ids=701750420&image_size=2x3&color_scheme=light" /> </picture> </td> </tr> </table> </a>

行为准则

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

🧑‍💻 社区

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

🌟 质量

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

🙏 致谢

Rsbuild 的一些实现借鉴了社区中杰出项目的灵感。我们要向它们表示感谢：

• 一些插件的实现参考自 create-react-app。
• 一些实用函数参考自 html-webpack-plugin。
• 一些 API 的设计参考自 vite。

这个 Rsbuild 网站由 Netlify 提供支持。

📖 许可证

Rsbuild 基于 MIT 许可证。