#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 工具有显著的性能优势：

// 传统构建工具可能需要 2-3 分钟
// Rspress 只需要 10-20 秒

// 热更新响应速度
// 传统工具: 1-2 秒
// Rspress: 100-200 毫秒

#MDX - Markdown + JSX

MDX 允许你在 Markdown 中使用 React 组件，让文档更加动态和交互：

# 我的文档

这是普通的 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，自动生成导航栏和侧边栏，减少手动配置：

---
title: 页面标题
sidebar_position: 1
---

#技术架构

#技术栈

Rspress 的技术栈包括：

• 构建引擎: Rust (通过 Rspack)
• 前端框架: React 18
• 路由: React Router
• 内容处理: MDX
• 代码高亮: Shiki
• 搜索引擎: FlexSearch
• 样式方案: CSS Modules

#工作流程

graph LR
    A[Markdown/MDX 文件] --> B[Rspack 编译]
    B --> C[React 组件]
    C --> D[静态 HTML]
    D --> E[生产环境部署]
    B -.-> F[开发服务器]
    F -.-> G[热更新]

#与其他工具的对比

#Rspress vs VitePress

#Rspress vs Docusaurus

#适用场景

Rspress 特别适合以下场景：

#1. 技术文档网站

• API 文档
• 产品使用手册
• 开发者指南
• 技术博客

#2. 开源项目文档

• GitHub 项目文档
• 框架/库的官方文档
• 工具的使用指南

#3. 企业内部知识库

• 团队协作文档
• 技术规范
• 最佳实践分享

#4. 教程和课程网站

• 在线教程
• 学习路径
• 培训材料

#快速体验

想要快速体验 Rspress？只需几个命令：

# 创建新项目
npm create rspress@latest

# 进入项目目录
cd my-rspress-site

# 安装依赖
npm install

# 启动开发服务器
npm run dev

浏览器打开 http://localhost:5173，你就可以看到一个运行中的 Rspress 站点了！

#学习资源

#官方资源

• 官方网站
• 官方文档
• GitHub 仓库
• 示例项目

#社区资源

• Discord 社区
• GitHub Discussions
• 中文社区

#下一步

现在你已经了解了 Rspress 的基本概念和特性，让我们进入 快速开始 章节，动手创建你的第一个 Rspress 项目！

::: info 📚 扩展阅读

• Rspack 官方文档 - 了解 Rspress 的构建引擎
• React 官方文档 - 深入学习 React
• MDX 官方文档 - 掌握 MDX 语法 :::