Rspress 2.0 гарлаа: туршлага ба AI-д чиглэсэн шинэчлэлт
Rspress 2.0 гарлаа: туршлага ба AI-д чиглэсэн шинэчлэлт
Бид Rspress 2.0-ийн албан ёсны гаргалтыг зарлаж байгаадаа баяртай байна!
Rspress нь Rsbuild дээр суурилсан статик сайт үүсгэгч бөгөөд хөгжүүлэгчдэд зориулсан баримт бичгийн сайт хэрэгсэл юм. 2023 оноос албан ёсоор гарснаас хойш, Rspress 1.x нийт 144 хувилбар гаргаж, 125 хувь нэмэр оруулагч төсөлд оролцсон. Илүү олон хөгжүүлэгчид Rspress-ийг сонгож, түүний үр дүнтэй компиляцийн гүйцэтгэл, тохиролцсон маршрутууд болон компонентын номын сангийн урьдчилсан харагдац зэрэг функцүүдийг ашиглан гоё, найдвартай баримт бичгийн сайтуудыг байгуулж байна.
Нийгмийн санал хүсэлт болон зөвлөмжийн үндсэн дээр, Rspress 2.0 нь сэдвийн гоо сайхан, AI-native, баримт бичгийн хөгжүүлэлтийн туршлага, Rslib-тэй хамт ашиглах зэрэг чиглэлээр илүү дэвшилтэт болсон.
Яагаад Rspress 2.0 вэ
Rspress 1.x нь баримт бичгийн сайт фреймворкийн компиляцийн гүйцэтгэлийг шийдсэн боловч баримт бичгийн хөгжүүлэлтийн хэрэгсэл болох үндсэн туршлагад нөлөөлж буй зарим асуудлууд үлдсэн. 2.0 хувилбар нь зөвхөн компиляцийн гүйцэтгэлд анхаарахгүй, баримт бичгийн сайт туршлагын бусад тал дээр ч төвлөрч байна:
- Сэдвийн хэв маяг: илүү гоё үндсэн сэдэв бүхий багц, мөн 1.x-д сэдвийн тохиргоонд тогтвортой API дутагдалтай байсан асуудлыг шийдэхийн тулд олон төрлийн өөрчлөх сэдвийн аргуудыг санал болгож байна.
- AI-native: Баримт бичгүүд зөвхөн хүний уншигчдад үйлчлэхээс гадна, Agent-уудын хувьд илүү сайн ойлгогдож, ашиглагдах шаардлагатай. Rspress одоо llms.txt үүсгэх болон SSG-с гаралтай SSG-MD функцүүдийг дотооддоо агуулж, Agent-уудын уншихад зориулсан өндөр чанартай Markdown үүсгэж байна.
- Шаардлагатай үед компиляц хийх, шууд эхлүүлэх: Зөвхөн тодорхой маршрутыг нэвтрэхэд шаардлагатай файлуудыг бүтээх, lazyCompilation-ийг стандарт байдлаар идэвхжүүлж, холбоосын hover үед нөөцийг preload хийх функцтэй хослуулан, төслийн хэмжээ ямар ч байсан dev-ийг шууд эхлүүлэх боломжтой.
- Shiki кодын тодруулга: Стандарт байдлаар Shiki-ийг нэгтгэж, бүтээх үед синтаксийн тодруулгыг гүйцэтгэж, сэдвийн солилт, transformer өргөтгөлүүдийг дэмжиж, @rspress/plugin-twoslash зэрэг нь кодын блокийн үзүүлэлтийг илүү баялаг болгоно.
- Баримт бичгийн хөгжүүлэлтийн туршлага: nav.json, meta.json зэрэг файлуудын HMR-ийг сайжруулж, IDE-д кодын зөвлөмжийн json схемыг шинээр нэмж оруулсан; стандарт байдлаар үхсэн холбоос шалгах функц идэвхжүүлсэн; гадаад файлуудыг иш татахыг дэмжих шинэ файлын кодын блокын синтаксийг нэмж оруулсан; @rspress/plugin-preview болон @rspress/plugin-playground зэрэг нь зэрэгцүүлэн ашиглах боломжтой.
- Rslib нэгтгэл: Одоо create-rslib ашиглан компонентын номын сангийн төслийг үүсгэх үед Rspress-ийг баримт бичгийн хэрэгсэл болгон сонгож, компонентын баримт бичгийн сайтыг хурдан байгуулах боломжтой.
2.0 шинэ онцлог
Шинэ сэдэв
2.0 стандарт сэдэв нь системийн шинэчлэлтийг хүлээн авсан бөгөөд, багийн дизайнер @Zovn Wei-ийн нийт дизайнаар хийгдсэн, визуал эффект болон унших туршлага дээр ихээхэн сайжруулалттай, мөн бүр компонент нь тусдаа солигдож, өндөр өөрчлөгдөх чадвартай.
Сэдвийн тохиргоо
Тохиргооны түвшнээр доошоос дээш: CSS хувьсагч, BEM ангилал нэр, ESM дахин экспортлох, компонентын eject гэсэн дөрвөн өөрчлөх сэдвийн арга байна.- CSS хувьсагчид: Шинэ сэдэв нь илүү олон CSS хувьсагчдыг ил болгож, сэдэвийн өнгө, кодын блок, эхний хуудас зэрэг стилийг давхарлаж байна. Та CSS хувьсагчдын хуудсанд интерактив байдлаар бүх CSS хувьсагчдыг урьдчилан харах, тохируулах боломжтой бөгөөд сэтгэлд нийцсэн тохиргоог олсны дараа төслөө ашиглахад шууд хуулж болно.
- BEM классын нэр: Дотоод компонентууд одоо бүгд BEM нэрлэлийн стандарт ашиглаж байна. Энэ нь маш хуучин загварын сонголт боловч бидний гүнзгий бодолтой шийдвэр юм. Хэрэглэгчид CSS сонгогчоор стилийг нарийн тохируулах боломжтой бөгөөд HTML бүтэц илүү тодорхой байна.
- ESM дахин экспортлох давхарга: Хэрэв CSS дээрх өөрчлөлтүүд захиалгын шаардлагыг хангахгүй бол JS ашиглан илүү гүнзгий захиалгыг хийх боломжтой. theme/index.tsx-д ESM дахин экспортлохыг ашиглан, та Rspress-ийн дотоод компонентуудын аль нэгийг давхарлаж болно.
- Компонентыг гаргах: Та шинэ rspress eject [component] командыг ашиглаж болно, энэ команд нь заасан компонентын эх кодыг theme/components/ директорт хуулж, эдгээр кодыг чөлөөтэй засварлах боломжтой, бүр AI-д шууд засварлуулах боломжтой, гүнзгий захиалгыг хэрэгжүүлэхийн тулд.
Навигацийн самбар, хажуугийн самбар tag
Rspress 2.0 Tag компонентыг хэрэгжүүлсэн, одоо frontmatter дотор tag атрибутыг ашиглан хажуугийн самбар эсвэл навигацийн самбарт UI тэмдэглэгээ хийх боломжтой.
Дотоод олон хэлний дэмжлэг
1.x хувилбарт Rspress зөвхөн англи текстийг дотооддоо агуулж байсан, хэрэв бусад хэл ашиглах бол жишээ нь zh, бүх текстийг тохируулах шаардлагатай байсан, ашиглахад хэцүү. Одоо 2.0 сэдэв нь zh, en, ja, ko, ru зэрэг олон хэлний орчуулгын текстийг дотооддоо агуулж, систем нь хэлний тохиргоо дээр үндэслэн автомат "Tree Shaking" хийж, зөвхөн та ашиглаж буй текст болон хэлүүдийг багцалдаг.
llms.txt дэмжлэг
Rspress одоо llms.txt үүсгэх чадварыг core-д нэгтгэж, шинэ SSG-MD (Static Site Generation to Markdown, статик сайт Markdown үүсгэх) чадварыг хэрэгжүүлсэн.
React дээр үндэслэсэн динамик рендерингийн фронтэнд статик мэдээллийг гаргаж авахад ихэвчлэн асуудал гардаг, Rspress мөн адил сорилттой тулгарч байна. Rspress нь хэрэглэгчдэд MDX хэсгүүд, React компонентууд, Hooks болон TSX маршрутууд зэрэг динамик шинж чанаруудаар баримт бичгийн илэрхийллийг сайжруулах боломжийг олгодог. Гэвч эдгээр динамик агуулга Markdown текст рүү хөрвүүлэх үед дараах асуудалтай тулгардаг:
- MDX-г AI-д шууд оруулахад их хэмжээний кодын синтаксийн дуу чимээ агуулж, React компонентын агуулга алдагддаг
- HTML-г Markdown руу хөрвүүлэх нь ихэвчлэн сайн үр дүнгүй, мэдээллийн чанар баталгаагүй
Энэ асуудлыг шийдвэрлэхийн тулд Rspress 2.0 SSG-MD шинж чанарыг нэвтрүүлсэн. Энэ нь статик сайт үүсгэх (SSG)-тэй төстэй шинэ функц бөгөөд таны хуудсыг HTML файл биш Markdown файл болгон рендерлэж, llms.txt болон llms-full.txt холбоотой файлуудыг үүсгэдэг.
Shiki хөрвүүлэх үед кодын блокийн онцлогRspress 2.0 нь кодын тодруулгыг Shiki ашиглан стандарт байдлаар гүйцэтгэдэг. 1.x хувилбарын prism гүйцэтгэлийн тодруулгын шийдлээс ялгаатай нь, Shiki нь кодыг компиляцийн үеэр тодруулдаг.
- CSS хувьсагчийн хуудсанд интерактив байдлаар Shiki-ийн янз бүрийн сэдвийг солих, урьдчилан харах боломжтой.
- Мөн Shiki нь twoslash зэрэг бичлэгийг баяжуулахын тулд өөрийн трансформер ашиглахыг зөвшөөрдөг.
- Хэрэгцээний дагуу програмчлалын хэлүүдийг оруулж, гүйцэтгэлийн зардал болон багцын хэмжээг нэмэгдүүлэхгүй.
- TextMate синтаксийн үндсэн дээр VS Code-той ижил, нарийн синтаксийн тодруулгыг гүйцэтгэдэг.
Барилгын гүйцэтгэл сайжруулалт
Rspress 2.0 нь Rsbuild болон Rspack 2.0 урьдчилсан хувилбараар удирддаг бөгөөд стандарт байдлаар шаардлагын дагуу компиляц болон тогтвортой кэшийг идэвхжүүлсэн.
Шаардлагын дагуу компиляц
Стандарт байдлаар dev.lazyCompilation-ийг идэвхжүүлсэн бөгөөд зөвхөн та тодорхой хуудсанд зочилсон үед тухайн хуудсыг компиляцлана, хөгжүүлэлтийн эхлэлийн хурдыг ихээхэн нэмэгдүүлж, миллисекундын хүйтэн эхлэлийг ч гүйцэтгэх боломжтой. Rspress нь холбоос дээр хулганаар хөвж байх үед зорилтот маршрутын хуудсыг урьдчилан ачаалах preload стратегийг мөн хэрэгжүүлсэн бөгөөд lazyCompilation-тай хослуулан хөгжүүлэлтийн туршлагыг алдагдалгүйгээр гүйцэтгэдэг.
Тогтвортой кэш
2.0 нь стандарт байдлаар тогтвортой кэшийг идэвхжүүлсэн бөгөөд халуун эхлэлтэд өмнөх компиляцийн үр дүнг дахин ашиглаж, барилгын хурдыг 30%-60% нэмэгдүүлдэг. Энэ нь rspress dev эсвэл rspress build-ийг анх удаа ажиллуулсны дараа дараагийн эхлэлтүүдийн хурд илт нэмэгдэхийг илэрхийлж байна.
Баримт бичгийн хөгжүүлэлтийн туршлага
Стандарт байдлаар үхсэн холбоосыг шалгах
Rspress 2.0 стандарт байдлаар үхсэн холбоосыг шалгах функцийг идэвхжүүлсэн. Барилгын явцад баримт бичиг дэх хүчин төгөлдөр бус холбоосуудыг автомат байдлаар шалгаж, та цаг тухайд нь олж засахад тусалдаг.
Файлын кодын блок
Та file="./path/to/file" шинж чанарыг ашиглан гадаад файлыг кодын блокийн агуулга болгон иш татаж, жишээ кодыг тусдаа файлуудад хадгалах боломжтой.
preview илүү уян хатан meta хэрэглээ
@rspress/plugin-preview одоо meta шинж чанар дээр суурилсан, илүү уян хатан бөгөөд файлын кодын блоктой хамтран ашиглах боломжтой.
Rslib & Rspress
create-rslib ашиглан төсөл үүсгэх үед та одоо Rspress хэрэгслийг сонгох боломжтой. Энэ нь танд компонентын номын санг хөгжүүлэхийн зэрэгцээ компонентын хэрэглээний заавар, API лавлахыг үзүүлэх, эсвэл компонентын үр дүнг шууд урьдчилан харах зориулалттай баримт бичгийн сайтыг хурдан байгуулах боломжийг олгодог.
Илүү их Rspress албан ёсны плагин
Rspress 2.0 нь хэд хэдэн албан ёсны плагинуудыг шинээр нэмсэн:
- @rspress/plugin-algolia: Rspress-ийн дотоод хайлтыг Algolia DocSearch-ээр солихыг дэмждэг
- @rspress/plugin-twoslash: TypeScript кодын блокт төрөл мэдээлэл нэмдэг
- @rspress/plugin-llms: SSG болон SSG-MD-ийг дэмждэггүй төслүүдэд llms.txt үүсгэх чадварыг олгодог
- @rspress/plugin-sitemap: SEO-ийг сайжруулахын тулд Sitemap файлыг автомат байдлаар үүсгэдэг
Бутархай өөрчлөлтүүд
Rspress 1.x руу шилжих
Хэрэв та 1.x төслийн хэрэглэгч бол бид 1.x-ээс 2.0 руу шилжихэд тань туслах дэлгэрэнгүй шилжүүлгийн баримт бичгийг бэлтгэсэн. Та хуудсанд "Markdown-ыг хуулбарлах" функцийг шууд ашиглаж, үүнийг таны түгээмэл кодын агент (жишээ нь Claude Code гэх мэт) руу оруулж шилжүүлгийг гүйцэтгэх боломжтой.### Node.js болон дээд урсгалын хамаарлын хувьд шаардлагууд
Rspress 2.0 нь Node.js хувилбар 20+ болон React хувилбар 18+ шаарддаг.
Дараагийн алхам
Rspress 2.0-ийн гаргалт нь шинэ эхлэл юм. Энэ гаргалтын дараа Rspress нь тасралтгүй шинэчлэгдэнэ:
- Экосистемийн интеграцийг дэмжих: Rslib, Rstest-тай илүү гүнзгий холбогдож, фронтэнд төсөл болон компонентын номын сангийн төслийн нэгтгэсэн хөгжлийн туршлагыг санал болгоно.
- AI болон баримт бичгийг илүү гүнзгий интеграци хийхийг судлах: Ухаалаг асуулт, автомат товчлол гэх мэт; SSG-MD-г сайжруулж, тогтвортой, илүү хялбар ашиглах боломжтой болгоно.
npm create rspress@latest
