Rspress 2.0 Diluncurkan: Pembaruan Baru yang Berfokus pada Pengalaman dan AI
Rspress 2.0 Diluncurkan: Pembaruan Baru yang Berfokus pada Pengalaman dan AI
Kami dengan senang hati mengumumkan peluncuran resmi Rspress 2.0!
Rspress adalah generator situs statis berbasis Rsbuild, yang dirancang khusus sebagai alat situs dokumentasi untuk pengembang. Sejak diluncurkan secara resmi pada tahun 2023, Rspress 1.x telah mengalami 144 iterasi dan melibatkan 125 kontributor dalam pengembangan proyek. Semakin banyak pengembang yang memilih Rspress, memanfaatkan kinerja kompilasi yang efisien, routing berbasis konvensi, dan pratinjau pustaka komponen untuk membangun situs dokumentasi yang menarik dan dapat diandalkan.
Berdasarkan umpan balik dan saran dari komunitas, Rspress 2.0 telah meningkatkan keindahan tema, AI-native, pengalaman pengembangan dokumentasi, dan penggunaan bersama Rslib.
Mengapa Rspress 2.0
Rspress 1.x telah menyelesaikan masalah kinerja kompilasi kerangka situs dokumentasi, tetapi masih ada beberapa masalah yang mempengaruhi pengalaman inti sebagai alat pengembangan dokumentasi. Versi 2.0 tidak hanya berfokus pada pencapaian kinerja kompilasi, tetapi juga memperhatikan aspek pengalaman situs dokumentasi lainnya:
- Gaya Tema: Satu set tema default yang lebih menarik, dan menyediakan berbagai cara untuk menyesuaikan tema, menyelesaikan masalah kurangnya API yang stabil dalam kustomisasi tema di 1.x.
- AI-native: Dokumentasi tidak hanya melayani pembaca manusia, tetapi juga perlu dipahami dan digunakan dengan lebih baik oleh Agent. Rspress sekarang dilengkapi dengan fungsi pembuatan llms.txt dan SSG-MD yang diturunkan dari SSG, menghasilkan konten Markdown berkualitas tinggi untuk dibaca oleh Agent.
- Kompilasi sesuai permintaan, peluncuran instan: Secara default mengaktifkan lazyCompilation, bersama dengan fungsi preload sumber daya saat tautan dihover, hanya membangun file yang diperlukan saat mengakses rute tertentu, memungkinkan peluncuran instan terlepas dari seberapa besar skala proyek.
- Sorotan Kode Shiki: Secara default terintegrasi dengan Shiki, menyelesaikan sorotan sintaksis saat dibangun, mendukung pergantian tema, dan ekstensi transformer, seperti @rspress/plugin-twoslash, memberikan efek tampilan blok kode yang lebih kaya.
- Pengalaman Pengembangan Dokumentasi: Mengoptimalkan HMR untuk file nav.json, meta.json, dan menambahkan skema json untuk petunjuk kode di dalam IDE; secara default mengaktifkan fungsi pemeriksaan tautan mati; menambahkan sintaks blok kode file, mendukung referensi file eksternal; @rspress/plugin-preview dan @rspress/plugin-playground mendukung penggunaan bersamaan, dll.
- Integrasi Rslib: Sekarang Anda dapat memilih Rspress sebagai alat dokumentasi saat menggunakan create-rslib untuk membuat proyek pustaka komponen, dengan cepat membangun situs dokumentasi komponen.
Fitur Baru 2.0
Tema Baru
Tema default 2.0 telah mengalami peningkatan sistematis, dirancang oleh desainer tim @Zovn Wei, dengan peningkatan signifikan dalam efek visual dan pengalaman membaca, dan setiap komponen dapat diganti secara independen, memiliki tingkat kustomisasi yang tinggi.
Kustomisasi Tema
Berdasarkan tingkat kustomisasi dari rendah ke tinggi, ada empat cara untuk menyesuaikan tema: variabel CSS, nama kelas BEM, ekspor ulang ESM, dan eject komponen.- Variabel CSS: Tema baru ini memperkenalkan lebih banyak variabel CSS, yang mencakup warna tema, gaya blok kode, halaman utama, dan lainnya. Anda dapat melihat dan menyesuaikan semua variabel CSS secara interaktif di halaman variabel CSS, dan setelah menemukan konfigurasi yang memuaskan, Anda dapat langsung menyalinnya untuk digunakan dalam proyek.
- Nama Kelas BEM: Komponen bawaan sekarang menggunakan standar penamaan BEM. Ini adalah pilihan yang sangat Old School, tetapi juga merupakan keputusan yang telah kami pertimbangkan dengan matang. Pengguna dapat menyesuaikan gaya dengan tepat menggunakan pemilih CSS, dan struktur HTML menjadi lebih jelas.
- Penggantian Ekspor Ulang ESM: Jika modifikasi pada CSS tidak memenuhi kebutuhan kustomisasi, Anda dapat melakukan kustomisasi yang lebih mendalam melalui JS. Dengan memanfaatkan ekspor ulang ESM di theme/index.tsx, Anda dapat mengganti komponen bawaan Rspress mana pun.
- Eject Komponen: Anda dapat menggunakan perintah baru rspress eject [component], yang akan menyalin kode sumber komponen yang ditentukan ke direktori theme/components/. Anda dapat memodifikasi kode ini sesuka hati, bahkan langsung menyerahkannya kepada AI untuk dimodifikasi, untuk mencapai kustomisasi yang mendalam.
Tag Navbar dan Sidebar
Rspress 2.0 telah mengimplementasikan komponen Tag, sekarang Anda dapat menggunakan atribut tag di frontmatter untuk menandai UI di sidebar atau navbar.
Dukungan Multibahasa Bawaan
Di versi 1.x, Rspress hanya menyertakan teks dalam bahasa Inggris, jika menggunakan bahasa lain seperti zh, semua teks harus dikonfigurasi, yang cukup merepotkan. Sekarang tema 2.0 menyertakan teks terjemahan dalam berbagai bahasa seperti zh, en, ja, ko, ru, dan sistem akan secara otomatis melakukan "Tree Shaking" berdasarkan konfigurasi bahasa, hanya mengemas teks dan bahasa yang Anda gunakan.
Dukungan llms.txt
Rspress sekarang mengintegrasikan kemampuan menghasilkan llms.txt ke dalam core, dan telah mengimplementasikan kemampuan SSG-MD (Static Site Generation to Markdown, Generasi Situs Statis ke Markdown) yang baru.
Dalam kerangka kerja frontend yang dirender secara dinamis berbasis React, sering kali ada masalah sulitnya mengekstrak informasi statis, Rspress juga menghadapi tantangan yang sama. Rspress memungkinkan pengguna untuk meningkatkan ekspresi dokumen melalui fragmen MDX, komponen React, Hooks, dan fitur dinamis seperti rute TSX. Namun, konten dinamis ini menghadapi masalah berikut saat dikonversi menjadi teks Markdown:
- Memberikan input MDX langsung ke AI akan mengandung banyak kebisingan sintaksis kode dan kehilangan konten komponen React.
- Mengubah HTML menjadi Markdown sering kali tidak efektif, dan kualitas informasi sulit dijamin.
Untuk mengatasi masalah ini, Rspress 2.0 memperkenalkan fitur SSG-MD. Ini adalah fitur baru yang mirip dengan generasi situs statis (SSG), tetapi perbedaannya adalah ia merender halaman Anda sebagai file Markdown, bukan file HTML, dan menghasilkan file terkait llms.txt dan llms-full.txt.
Sorotan Kode Blok dengan ShikiRspress 2.0 secara default menggunakan Shiki untuk penyorotan kode. Dibandingkan dengan solusi penyorotan runtime prism 1.x, Shiki menyelesaikan pemrosesan penyorotan pada saat kompilasi.
- Mendukung berbagai tema gaya, seperti di halaman variabel CSS yang dapat beralih dan melihat tema Shiki yang berbeda secara interaktif.
- Shiki juga memungkinkan penggunaan transformer kustom untuk memperkaya penulisan, seperti twoslash dan lainnya.
- Mengimpor bahasa pemrograman sesuai kebutuhan, tanpa menambah beban runtime dan ukuran paket.
- Berdasarkan sintaks TextMate untuk mencapai penyorotan sintaks yang akurat yang konsisten dengan VS Code.
Peningkatan Kinerja Pembangunan
Rspress 2.0 didorong oleh Rsbuild dan versi prabaca Rspack 2.0, dan secara default mengaktifkan kompilasi sesuai kebutuhan dan cache persisten.
Kompilasi Sesuai Kebutuhan
Secara default mengaktifkan dev.lazyCompilation, hanya ketika Anda mengakses halaman tertentu, halaman tersebut akan dikompilasi, secara signifikan meningkatkan kecepatan pengembangan, bahkan mencapai waktu mulai dingin dalam milidetik. Rspress juga menerapkan strategi preload rute, ketika mouse melayang di atas tautan, halaman rute target akan dimuat sebelumnya, bersama dengan lazyCompilation untuk pengalaman pengembangan tanpa kerugian.
Cache Persisten
2.0 juga secara default mengaktifkan cache persisten, menggunakan hasil kompilasi terakhir dalam pengaktifan panas, meningkatkan kecepatan pembangunan sebesar 30%-60%. Ini berarti setelah pertama kali menjalankan rspress dev atau rspress build, kecepatan pengaktifan berikutnya akan meningkat secara signifikan.
Pengalaman Pengembangan Dokumen
Secara Default Mengaktifkan Pemeriksaan Tautan Mati
Rspress 2.0 secara default mengaktifkan fungsi pemeriksaan tautan mati. Selama proses pembangunan, secara otomatis akan mendeteksi tautan tidak valid dalam dokumen, membantu Anda menemukan dan memperbaiki tepat waktu.
Blok Kode File
Anda dapat menggunakan atribut file="./path/to/file" untuk merujuk file eksternal sebagai konten blok kode, menjaga contoh kode dalam file terpisah.
Penggunaan meta preview yang lebih fleksibel
@rspress/plugin-preview sekarang menggunakan atribut meta, lebih fleksibel, dan juga dapat dipadukan dengan blok kode file.
Rslib & Rspress
Saat menggunakan create-rslib untuk membuat proyek, Anda sekarang dapat memilih alat Rspress. Ini memungkinkan Anda untuk dengan cepat membangun situs dokumentasi yang mendukung saat mengembangkan pustaka komponen, untuk menulis petunjuk penggunaan komponen, menampilkan referensi API, atau melihat efek komponen secara langsung.
Lebih Banyak Plugin Resmi Rspress
Rspress 2.0 menambahkan beberapa plugin resmi:
- @rspress/plugin-algolia: mendukung penggantian pencarian bawaan Rspress dengan Algolia DocSearch
- @rspress/plugin-twoslash: menambahkan petunjuk tipe untuk blok kode TypeScript
- @rspress/plugin-llms: menyediakan kemampuan pembuatan llms.txt untuk proyek yang tidak mendukung SSG dan SSG-MD
- @rspress/plugin-sitemap: secara otomatis menghasilkan file Sitemap untuk mengoptimalkan SEO
Perubahan yang Mengganggu
Migrasi dari Rspress 1.x
Jika Anda adalah pengguna proyek 1.x, kami telah menyiapkan dokumen migrasi yang rinci untuk membantu Anda meningkatkan dari 1.x ke 2.0. Anda dapat langsung menggunakan fungsi "salin Markdown" di halaman untuk memasukkannya ke agen pengkodean yang biasa Anda gunakan (seperti Claude Code, dll.) untuk menyelesaikan migrasi.### Node.js dan Persyaratan Versi Dependensi Hulu
Rspress 2.0 memerlukan versi Node.js 20+, versi React 18+.
Langkah Selanjutnya
Rilis Rspress 2.0 hanyalah titik awal yang baru. Setelah rilis ini, Rspress akan terus beriterasi:
- Mendorong Integrasi Ekosistem: Menggabungkan lebih dalam dengan Rslib, Rstest, untuk memberikan pengalaman pengembangan terintegrasi bagi proyek front-end dan proyek pustaka komponen.
- Menjelajahi Integrasi AI dengan Dokumen yang Lebih Dalam: Seperti tanya jawab cerdas, ringkasan otomatis, dll; menyempurnakan SSG-MD agar stabil dan lebih mudah digunakan.
npm create rspress@latest
