Rspress 2.0 lanzado: una nueva actualización centrada en la experiencia y la IA
Rspress 2.0 lanzado: una nueva actualización centrada en la experiencia y la IA
¡Estamos emocionados de anunciar el lanzamiento oficial de Rspress 2.0!
Rspress es un generador de sitios estáticos basado en Rsbuild, diseñado como una herramienta de documentación para desarrolladores. Desde su lanzamiento oficial en 2023, Rspress 1.x ha tenido un total de 144 versiones y 125 contribuidores han participado en el desarrollo del proyecto. Cada vez más desarrolladores eligen Rspress, aprovechando sus características como alto rendimiento de compilación, enrutamiento basado en convenciones y vista previa de bibliotecas de componentes para construir sitios de documentación atractivos y confiables.
Basado en los comentarios y sugerencias de la comunidad, Rspress 2.0 ha avanzado en aspectos como estética del tema, nativo de IA, experiencia de desarrollo de documentación, y uso conjunto con Rslib.
¿Por qué Rspress 2.0?
Rspress 1.x ya había abordado el problema del rendimiento de compilación del marco de sitios de documentación, pero aún existían algunos problemas que afectaban la experiencia central como herramienta de desarrollo de documentación. La versión 2.0 no solo se centra en la búsqueda de rendimiento de compilación, sino que también se enfoca en otros aspectos de la experiencia del sitio de documentación:
- Estilo del tema: un tema predeterminado más atractivo, que ofrece múltiples formas de personalización del tema, resolviendo el problema de la falta de una API estable para la personalización de temas en 1.x.
- Nativo de IA: la documentación no solo sirve a los lectores humanos, sino que también necesita ser mejor entendida y utilizada por los Agentes. Rspress ahora incluye la generación de llms.txt y la función SSG-MD derivada de SSG, generando contenido de Markdown de alta calidad para que los Agentes lo lean.
- Compilación bajo demanda, inicio instantáneo: habilita por defecto lazyCompilation, junto con la función de precarga de recursos al pasar el mouse sobre los enlaces, construyendo solo los archivos necesarios al acceder a rutas específicas, logrando que, sin importar el tamaño del proyecto, el dev pueda iniciar instantáneamente.
- Resaltado de código Shiki: integración predeterminada de Shiki, completando el resaltado de sintaxis durante la construcción, soportando cambio de temas y extensiones de transformadores, como @rspress/plugin-twoslash, ofreciendo una presentación de bloques de código más rica.
- Experiencia de desarrollo de documentación: optimización de HMR para archivos como nav.json, meta.json, y nueva json schema para sugerencias de código en IDE; habilitación predeterminada de la función de verificación de enlaces rotos; nueva sintaxis de bloques de código de archivos, soportando la referencia a archivos externos; @rspress/plugin-preview y @rspress/plugin-playground soportan uso simultáneo, etc.
- Integración de Rslib: ahora puedes elegir Rspress como herramienta de documentación al crear proyectos de bibliotecas de componentes usando create-rslib, permitiendo construir rápidamente sitios de documentación de componentes.
Nuevas características 2.0
Nuevo tema
El tema predeterminado 2.0 ha recibido una actualización sistemática, diseñado por el diseñador del equipo @Zovn Wei, con mejoras significativas en efectos visuales y experiencia de lectura, y cada componente puede ser reemplazado de forma independiente, ofreciendo una alta personalización.
Personalización del tema
De acuerdo con el grado de personalización de bajo a alto, hay cuatro formas de personalización del tema: variables CSS, nombres de clase BEM, reexportación ESM para sobrescribir, y expulsión de componentes.- Variables CSS: El nuevo tema expone más variables CSS, que cubren estilos como el color del tema, bloques de código, la página de inicio, etc. Puedes previsualizar y ajustar interactivamente todas las variables CSS en la página de variables CSS, y una vez que encuentres la configuración que te satisfaga, puedes copiarla directamente para usarla en tu proyecto.
- Nombres de clase BEM: Los componentes integrados ahora utilizan la convención de nomenclatura BEM. Esta es una elección bastante Old School, pero también es una decisión bien pensada. Los usuarios pueden ajustar los estilos con precisión a través de selectores CSS, y la estructura HTML es más clara.
- Reexportación ESM: Si las modificaciones en CSS no satisfacen las necesidades de personalización, se puede realizar una personalización más profunda a través de JS. En theme/index.tsx, utilizando la reexportación ESM, puedes sobrescribir cualquier componente integrado de Rspress.
- Expulsar componentes: Puedes usar el nuevo comando rspress eject [component], que copiará el código fuente del componente especificado al directorio theme/components/. Puedes modificar este código libremente, incluso dejar que la IA lo modifique, para lograr una personalización profunda.
Etiquetas de barra de navegación y barra lateral
Rspress 2.0 implementó el componente Tag, ahora puedes usar la propiedad tag en frontmatter para marcar la UI en la barra lateral o en la barra de navegación.
Soporte multilingüe integrado
En la versión 1.x, Rspress solo incluía texto en inglés. Si se usaban otros idiomas como zh, era necesario configurar todos los textos, lo que resultaba complicado. Ahora, el tema 2.0 incluye textos traducidos en varios idiomas como zh, en, ja, ko, ru, etc. El sistema realizará automáticamente "Tree Shaking" según la configuración del idioma, empaquetando solo los textos y lenguajes que uses.
Soporte para llms.txt
Rspress ahora integra la capacidad de generar llms.txt en el núcleo y ha implementado una nueva capacidad SSG-MD (Generación de Sitios Estáticos a Markdown).
En los frameworks de frontend que utilizan renderizado dinámico basado en React, a menudo hay problemas para extraer información estática, y Rspress enfrenta el mismo desafío. Rspress permite a los usuarios mejorar la expresividad de los documentos a través de fragmentos MDX, componentes React, Hooks y características de enrutamiento TSX. Sin embargo, este contenido dinámico enfrenta los siguientes problemas al convertirse en texto Markdown:
- Dar directamente MDX a la IA incluirá mucho ruido de sintaxis de código y perderá el contenido de los componentes React.
- Convertir HTML a Markdown a menudo no da buenos resultados, y la calidad de la información es difícil de garantizar.
Para resolver este problema, Rspress 2.0 introduce la característica SSG-MD. Esta es una función completamente nueva, similar a la generación de sitios estáticos (SSG), pero la diferencia es que renderiza tus páginas como archivos Markdown en lugar de archivos HTML, y genera archivos relacionados llms.txt y llms-full.txt.
Resaltado de bloques de código en la era de ShikiRspress 2.0 utiliza Shiki para resaltar código de forma predeterminada. En comparación con el esquema de resaltado en tiempo de ejecución de prism en 1.x, Shiki completa el procesamiento de resaltado en tiempo de compilación.
- Soporta múltiples estilos de tema, por ejemplo, en la página de variables CSS puedes cambiar y previsualizar interactivamente diferentes temas de Shiki.
- Al mismo tiempo, Shiki también permite el uso de transformadores personalizados para enriquecer la escritura, como twoslash, entre otros.
- Importa lenguajes de programación según sea necesario, sin aumentar la sobrecarga en tiempo de ejecución ni el tamaño del paquete.
- Basado en la sintaxis de TextMate, implementa un resaltado de sintaxis preciso y consistente con VS Code.
Mejora del rendimiento de construcción
Rspress 2.0 está impulsado por Rsbuild y la versión preliminar de Rspack 2.0, y por defecto activa la compilación bajo demanda y la caché persistente.
Compilación bajo demanda
Por defecto, se activa dev.lazyCompilation, solo se compilará una página cuando accedas a ella, lo que mejora significativamente la velocidad de inicio del desarrollo, incluso logrando un inicio en frío en milisegundos. Rspress también implementa una estrategia de precarga de rutas, cuando el mouse pasa sobre un enlace, se precarga la página de la ruta objetivo, combinando lazyCompilation para lograr una experiencia de desarrollo sin pérdidas.
Caché persistente
La versión 2.0 también activa por defecto la caché persistente, reutilizando los resultados de la última compilación en un inicio caliente, mejorando la velocidad de construcción entre un 30% y un 60%. Esto significa que después de ejecutar por primera vez rspress dev o rspress build, la velocidad de inicio posterior mejorará notablemente.
Experiencia de desarrollo de documentación
Verificación de enlaces rotos activada por defecto
Rspress 2.0 activa por defecto la función de verificación de enlaces rotos. Durante el proceso de construcción, se detectarán automáticamente los enlaces inválidos en la documentación, ayudándote a descubrir y reparar problemas a tiempo.
Bloques de código de archivo
Puedes usar el atributo file="./path/to/file" para referenciar archivos externos como contenido de bloques de código, manteniendo el código de ejemplo en archivos separados.
Uso más flexible de meta en preview
@rspress/plugin-preview ahora utiliza el atributo meta, lo que lo hace más flexible y también se puede combinar con bloques de código de archivo.
Rslib & Rspress
Al usar create-rslib para crear un proyecto, ahora puedes elegir la herramienta Rspress. Esto te permite construir rápidamente un sitio de documentación complementario mientras desarrollas una biblioteca de componentes, para escribir instrucciones de uso de componentes, mostrar referencias de API o previsualizar en tiempo real los efectos de los componentes.
Más plugins oficiales de Rspress
Rspress 2.0 ha añadido varios plugins oficiales:
- @rspress/plugin-algolia: Soporta reemplazar la búsqueda integrada de Rspress por Algolia DocSearch
- @rspress/plugin-twoslash: Añade sugerencias de tipo a bloques de código TypeScript
- @rspress/plugin-llms: Proporciona capacidad de generación de llms.txt para proyectos que no soportan SSG y SSG-MD
- @rspress/plugin-sitemap: Genera automáticamente archivos Sitemap para optimizar SEO
Cambios importantes
Migración desde Rspress 1.x
Si eres usuario de un proyecto 1.x, hemos preparado una documentación de migración detallada para ayudarte a actualizar de 1.x a 2.0. Puedes usar directamente la función "Copiar Markdown" en la página, ingresándola a tu agente de codificación habitual (como Claude Code, etc.) para completar la migración.### Node.js y requisitos de versión de dependencias ascendentes
Rspress 2.0 requiere Node.js versión 20+, React versión 18+.
Siguiente paso
El lanzamiento de Rspress 2.0 es solo un nuevo punto de partida. Después de este lanzamiento, Rspress continuará iterando:
- Avanzar en la integración del ecosistema: combinarse más profundamente con Rslib, Rstest, proporcionando una experiencia de desarrollo integrada para proyectos de frontend y bibliotecas de componentes.
- Explorar una integración más profunda de AI y documentación: como preguntas y respuestas inteligentes, resúmenes automáticos, etc.; mejorar SSG-MD para que sea estable y más fácil de usar.
npm create rspress@latest
