Rsbuild
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 的设计资源。
🤝 贡献
欢迎新的贡献者!
请阅读贡献指南。
贡献者
| |
---|---|
行为准则
本仓库已采用字节跳动开源行为准则。请查看行为准则了解更多详情。
🧑💻 社区
来Discord与我们聊天吧!Rspack / Rsbuild 团队和用户都活跃在那里,我们一直在寻找贡献者。
🌟 质量
Rsbuild 使用 Web Infra QoS 来观察关键指标的趋势,如包大小、编译速度和安装大小。
🙏 致谢
Rsbuild 的一些实现借鉴了社区中杰出项目的灵感。我们要向它们表示感谢:
- 一些插件的实现参考自 create-react-app。
- 一些实用函数参考自 html-webpack-plugin。
- 一些 API 的设计参考自 vite。
这个 Rsbuild 网站由 Netlify 提供支持。
📖 许可证
Rsbuild 基于 MIT 许可证。