Rspress 简介
什么是 Rspress？
Rspress 是一个现代化的静态站点生成器，由字节跳动 Web Infra 团队开发，专门为技术文档网站设计。它基于 Rust 构建，结合了 React 和 MDX 的强大功能，为开发者提供了快速、灵活且易于使用的文档解决方案。
为什么选择 Rspress？
1. 极致性能
Rspress 的核心构建引擎基于 Rust 编写，相比传统的 JavaScript 工具链，提供了数倍的性能提升：
- 快速构建 - 大型文档项目的构建时间从分钟级降至秒级
- 即时热更新 - 开发时修改文档，几乎实时看到效果
- 优化产物 - 自动进行代码分割和按需加载，确保最佳的加载性能
2. 开发体验优先
Rspress 注重开发者的使用体验，提供了丰富的功能：
- 约定式路由 - 基于文件系统的路由，无需手动配置
- MDX 支持 - 在 Markdown 中无缝使用 React 组件
- TypeScript 支持 - 完整的类型定义，提供更好的开发体验
- 丰富的插件 - 灵活的插件系统，轻松扩展功能
3. 功能完善
作为专业的文档工具，Rspress 提供了所有必需的功能：
- 全文搜索 - 内置基于 FlexSearch 的高性能搜索
- 国际化 - 完善的多语言支持
- 主题定制 - 灵活的主题系统，可深度定制
- 代码高亮 - 基于 Shiki 的代码高亮，支持多种主题
- 响应式设计 - 完美适配桌面、平板和移动设备
核心特性
基于 Rust 的构建引擎
Rspress 使用 Rust 编写的构建工具链，相比 JavaScript 工具有显著的性能优势：
typescript
// 传统构建工具可能需要 2-3 分钟
// Rspress 只需要 10-20 秒
// 热更新响应速度
// 传统工具: 1-2 秒
// Rspress: 100-200 毫秒MDX - Markdown + JSX
MDX 允许你在 Markdown 中使用 React 组件，让文档更加动态和交互：
mdx
# 我的文档
这是普通的 Markdown 内容。
<CustomComponent prop="value">
可以在 Markdown 中使用 React 组件！
</CustomComponent>
## 更多内容
继续使用 Markdown 语法...约定式路由
Rspress 采用基于文件系统的路由，文件结构即路由结构：
docs/
├── index.md -> /
├── guide/
│ ├── index.md -> /guide
│ ├── start.md -> /guide/start
│ └── config.md -> /guide/config
└── api/
└── cli.md -> /api/cli自动生成导航
根据目录结构和文件的 frontmatter，自动生成导航栏和侧边栏，减少手动配置：
yaml
---
title: 页面标题
sidebar_position: 1
---技术架构
技术栈
Rspress 的技术栈包括：
- 构建引擎: Rust (通过 Rspack)
- 前端框架: React 18
- 路由: React Router
- 内容处理: MDX
- 代码高亮: Shiki
- 搜索引擎: FlexSearch
- 样式方案: CSS Modules
工作流程
mermaid
graph LR
A[Markdown/MDX 文件] --> B[Rspack 编译]
B --> C[React 组件]
C --> D[静态 HTML]
D --> E[生产环境部署]
B -.-> F[开发服务器]
F -.-> G[热更新]与其他工具的对比
Rspress vs VitePress
| 特性 | Rspress | VitePress |
|---|---|---|
| 构建引擎 | Rust (Rspack) | JavaScript (Vite) |
| 构建速度 | 极快 | 快 |
| 前端框架 | React | Vue |
| MDX 支持 | ✅ 原生支持 | ❌ 需要插件 |
| 组件生态 | React 生态 | Vue 生态 |
| TypeScript | ✅ 完整支持 | ✅ 完整支持 |
Rspress vs Docusaurus
| 特性 | Rspress | Docusaurus |
|---|---|---|
| 构建速度 | 极快 | 中等 |
| 配置复杂度 | 低 | 中等 |
| 约定式路由 | ✅ | ❌ |
| 自动导航生成 | ✅ | 部分支持 |
| 学习曲线 | 平缓 | 中等 |
适用场景
Rspress 特别适合以下场景：
1. 技术文档网站
- API 文档
- 产品使用手册
- 开发者指南
- 技术博客
2. 开源项目文档
- GitHub 项目文档
- 框架/库的官方文档
- 工具的使用指南
3. 企业内部知识库
- 团队协作文档
- 技术规范
- 最佳实践分享
4. 教程和课程网站
- 在线教程
- 学习路径
- 培训材料
快速体验
想要快速体验 Rspress？只需几个命令：
bash
# 创建新项目
npm create rspress@latest
# 进入项目目录
cd my-rspress-site
# 安装依赖
npm install
# 启动开发服务器
npm run dev浏览器打开 http://localhost:5173，你就可以看到一个运行中的 Rspress 站点了！
学习资源
官方资源
社区资源
下一步
现在你已经了解了 Rspress 的基本概念和特性，让我们进入 快速开始 章节，动手创建你的第一个 Rspress 项目！
💡 小贴士
Rspress 是一个年轻但发展迅速的项目，社区非常活跃。如果遇到问题，可以在 GitHub Issues 或 Discord 社区寻求帮助。
📚 扩展阅读
- Rspack 官方文档 - 了解 Rspress 的构建引擎
- React 官方文档 - 深入学习 React
- MDX 官方文档 - 掌握 MDX 语法