大家好,我是Echa。
好消息,2023年10月份字节跳动 ByteDance Web Infra 团队对外宣布 Rspress 1.0 正式发布。此消息一出,在Web 开发者各大论坛讨论的沸沸扬扬,有些人说又重复造轮子,有些人说为了完成KPI,粉丝们你们怎么看呢?欢迎在评论下说出自己的看法。
借此机会,小编先给大家详细介绍一下Rspress 到底是什么,能做什么,有哪些优点等等,只有彻底了解了Rspress ,才能说出自己观点。下面小编给大家一一介绍上面的问题。
传送门:https://rspress.dev/
Github:https://github.com/web-infra-dev/rspress
Rspack 是由 ByteDance Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具,拥有高性能、兼容 Webpack 生态、定制性强等多种优点,解决了我们在业务场景中遇到的非常多的问题,让很多开发者的体验有了质的提升。
Rspress 是一个基于 Rspack 的静态站点生成器,基于 React 框架进行渲染,内置了一套默认的文档主题,你可以通过 Rspress 来快速搭建一个文档站点,同时也可以自定义主题,来满足你的个性化静态站需求,比如博客站、产品主页等。当然,你也可以接入官方提供的相应插件来方便地搭建组件库文档。
为什么要做 Rspack ?
字节跳动内部存在非常多的大型前端应用,它们有着非常复杂的构建配置,十几分钟甚至半小时的构建耗时,我们尝试了多种方法去优化这些项目的编译速度,但是社区内存在的方案都或多或少存在一些问题,在对这些问题总结后,我们理解到工程师对构建工具的诉求是:
在明确这四点之后,字节跳动 ByteDance Web Infra 团队调研了社区内的所有技术方案,发现并没有完全满足我们需求的,所以ByteDance Web Infra 团队决定自研 Rspack。
Rspress 主要以如下的几个方向来进行建设:
这些也代表了 SSG 站点开发的一些核心需求。接下来将会根据这几个方面分别进行介绍。
当项目越来越庞大,团队成员时常苦恼于冗长的项目启动时间,开发体验因此受到了一些负面影响,并且项目开发的时间越长,这种体验的劣化就越为明显。
我们不禁开始思考,是否能跳出目前社区工具链的限制,突破现有 SSG 框架的性能瓶颈,实现绝大多数场景的项目秒启效果?
接着,我们在这个方向上持续地探索,最终在 Rspress 上实现了这样的效果。以 Rspress 官网文档的内容为例,Rspress、Docusaurus 和 Nextra 三者的性能对比情况如下:
如果只说一种最核心的优化手段,那无疑是 Rust 前端工具链。 官方主要在两个性能敏感部分使用了 Rust 工具链:
与此同时,Rspress 内部也应用了其它的诸多构建优化手段,比如主题包预打包、样式预生成 等等。这些额外的优化手段,配合强有力的 Rust 工具链,将 SSG 框架的编译性能推向了一个崭新的高度。
为了保证内容开发的灵活性,Rspress 选择支持 MDX 这种内容格式。
因为 MDX 的背后实际代表了一种组件化的内容组织方式,一方面文档即组件,那么我们可以在不同文档间复用文档片段,另一方面在文档中可以引入任何自定义 React 组件,大大释放了文档开发的想象力。
当然,Rspress 在文档站基础能力的打磨上也做了相当多的工作,支持了如下的功能特性:
Rspress 内部设计了多种扩展机制,保证足够强的定制能力,包括:
接下来我们来介绍 Rspress 的主要功能特性。
自动生成布局
对于一个文档站的搭建而言,除了显示正文内容之外,我们一般还需要以下的几个布局模块:
对于文档大纲,Rspress 会自动提取文档中的各级标题,生成大纲信息,并默认展示在文章页右侧,你无需其它操作。
而对于导航栏和侧边栏,官方提供了两种配置方式,你可以选择其中一种进行配置:
["introduction", "install", "start"]
官方推荐在一般情况下使用声明式配置,这样有诸多的好处:
而编程式配置则在某些需要动态生成配置的场景中非常有用,比如 Rspress 官方的 TypeDoc 插件 会根据 TypeDoc 提供的一份 json 数据自动转换为 nav 和 sidebar 的配置。
MDX 支持
MDX 是一种功能强大的内容开发方式。你不仅仅可以像往常一样编写 Markdown 文件,而且可以在 Markdown 的内容中使用 React 组件:
除此之外,Rspress 还支持了一些特定的语法,如:
SSG
Rspress 是一个标准的 SSG 框架,在生产环境的构建中,它会自动帮你生成静态站点,即生成各个页面的 HTML 内容,在构建完成之后,HTML 会出现在默认的产物目录中。
随后,你可以将这个产物目录的内容部署到任何静态站点托管服务上,比如 Github Pages、Netlify、Vercel 等等。
同时,官方也提供了配置让你能够很方便地自定义 SSG 生成的 HTML 内容。
国际化(i18n)
国际化在一个文档类型的站点中是一个很常见的需求,而 Rspress 将国际化的能力封装得足够简单易用,在框架中我们将国际化抽象为如下的需求:
框架已经为你支持了这些需求场景,你可以根据 I18n 教程 来一步步为你的站点实现国际化。
多版本文档
在某些场景中,我们需要进行多版本文档管理,而 Rspress 已经内置了多版本文档的支持,一方面你可以通过简单的配置来开启这个能力,另一方面你只需要按照往常的写法来组织目录即可,不引入非必要的目录和概念,将心智负担降到最低:
// 配置文件
import { defineConfig } from 'rspress/config';
export default defineConfig({
multiVersion: {
default: 'v1',
versions: ['v1', 'v2'],
},
});
// 目录结构
docs
├── v1
│ ├── README.md
│ └── guide
│ └── README.md
└── v2
├── README.md
└── guide
└── README.md
全文搜索
Rspress 中提供开箱即用的全文搜索能力,你无需任何配置即可接入,底层基于开源的 FlexSearch 引擎实现,效果如下:
自定义主题
Rspress 支持两种自定义主题的方式:
// theme/index.tsx
import Theme from 'rspress/theme';
import { NoSSR } from 'rspress/runtime';
import { Documate } from '@documate/react';
import '@documate/react/dist/style.css';
const Layout = () => (
}
/>
);
export default {
...Theme,
Layout,
};
export * from 'rspress/theme';
效果如下:
插件机制
插件机制是 Rspress 至关重要的部分,它可以让你在搭建站点的过程中,方便地扩展框架的功能。
Rspress 提供了 preview 插件,可以自动为你生成组件预览。当你注册 preview 插件后,在 mdx 文件中声明如下的代码块:
import React from 'react';
import { Tag, Space } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
const COLORS = [
'red',
'orangered',
'orange',
'gold',
'lime',
'green',
'cyan',
'blue',
'arcoblue',
'purple',
'pinkpurple',
'magenta',
'gray',
];
export default () => {
return (
{COLORS.map((color, i) => (
{color}
))}
);
};
那么你可以看到如下的预览效果:
当然,插件同时也支持移动端预览模式,你可以通过插件配置开启,预览效果如下:
demo 实时 Playground
对于组件文档,如果能提供组件的实时编辑的能力,将能大大提高文档的交互体验。
为了实现这个功能,你只需要注册官方的 playground 插件,然后在 .mdx 文件中声明你的代码块。(这里以上面的代码块为例)
接着,你将会在文档中看到下面的 playground 效果:
内置流畅的转场动画
View Transition API 是现代浏览器原生提供的一组 API,用于实现页面跳转过程中的过渡效果。在 Rspress 中我们也跟进了这个特性,基于 View Transition 实现了文档的过渡动画,而未使用任何第三方 SPA 的动画方案。在未来,我们也会探索出更多的动画效果,进一步提升体验。
export default defineConfig({
themeConfig: {
// 开启 View Transition 过渡
enableContentAnimation: true,
},
});
与 Docusaurus 的区别
Docusaurus 是 Meta 开源的一款 SSG 框架,它和 Rspress 一样使用 React 作为渲染框架,且支持 MDX,但 Rspress 与 Docusaurus 的区别主要在于:
与 Nextra 的区别
Nextra 是 Vercel 开源的一款 SSG 框架,它也和 Rspress 一样使用 React 作为渲染框架,且支持 MDX。Rspress 与 Nextra 的区别主要在于:
与 VitePress 的区别
VitePress 是一款基于 Vite 静态站点生成器,它的特点是使用 Vue 作为渲染框架,且性能非常优秀。Rspress 与 VitePress 的区别主要在于:
1. 初始化项目
方式一:通过脚手架创建
你可以通过 Rspress 脚手架命令来创建项目:
npm create rspress@latest
或者:yarn create rspress@latest
或者:pnpm create rspress@latest
或者:bun create rspress@latest
然后按照提示输入项目名称,即可创建一个 Rspress 项目。
方式二:手动创建
首先,你可以通过以下命令创建一个新目录:
mkdir rspress-app && cd rspress-app
执行 npm init -y 来初始化一个项目。你可以使用 npm、yarn 或 pnpm 安装 Rspress:
npm install rspress typescript ts-node -D
或者: yarn add rspress typescript ts-node -D
或者:pnpm install rspress typescript ts-node -D
或者:bun add rspress typescript ts-node -D
然后通过如下命令创建文件:
mkdir docs && echo '# Hello World' > docs/index.md
在 package.json 中加上如下的脚本:
{
"scripts": {
"dev": "rspress dev",
"build": "rspress build",
"preview": "rspress preview"
}
}
然后初始化一个配置文件 rspress.config.ts:
import { defineConfig } from 'rspress/config';
export default defineConfig({
// 文档根目录
root: 'docs',
});
同时新建 tsconfig.json,内容如下:
{
"compilerOptions": {
"esModuleInterop": true,
"jsx": "react-jsx"
}
}
启动 Dev Server
通过如下命令启动本地开发服务:
npm run dev
这样 Rspress 将启动开发服务。
生产环境构建
通过如下命令构建生产环境的产物:
npm run build
默认情况下,Rspress 将会把产物打包到 doc_build 目录。
本地预览产物
通过如下命令启动本地预览服务:
npm run preview
这样 Rspress 将启动产物预览服务。
一台电脑,一个键盘,尽情挥洒智慧的人生;
几行数字,几个字母,认真编写生活的美好;
一 个灵感,一段程序,推动科技进步,促进社会发展。
创作不易,喜欢的老铁们加个关注,点个赞,打个赏,后面会不定期更新干货和技术相关的资讯,速速收藏,谢谢!你们的一个小小举动就是对小编的认可,更是创作的动力。
创作文章的初心是:沉淀、分享和利他。既想写给现在的你,也想贪心写给 10 年、20 年后的工程师们,现在的你站在浪潮之巅,面对魔幻的互联网世界,很容易把一条河流看成整片大海。未来的读者已经知道了这段技术的发展历史,但难免会忽略一些细节。如果未来的工程师们真的创造出了时间旅行机器,可以让你回到现在。那么小编的创作就是你和当年工程师们的接头暗号,你能感知到他们在这个时代的键盘上留下的余温。
页面更新:2024-02-14
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号