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-MD ที่เกิดจาก SSG ซึ่งสร้างเนื้อหา Markdown ที่มีคุณภาพสูงสำหรับ Agent.
- คอมไพล์ตามความต้องการ, เริ่มต้นทันที: เปิดใช้งาน lazyCompilation โดยค่าเริ่มต้น ร่วมกับฟังก์ชัน preload ของทรัพยากรเมื่อมีการ hover ลิงก์ สร้างไฟล์ที่จำเป็นเฉพาะเมื่อเข้าถึงเส้นทางเฉพาะ ทำให้ไม่ว่าจะมีขนาดโครงการใหญ่แค่ไหน dev ก็สามารถ เริ่มต้นทันที.
- Shiki ไฮไลต์โค้ด: รวม Shiki โดยค่าเริ่มต้น ทำให้ การไฮไลต์ไวยากรณ์เสร็จสิ้นในระหว่างการสร้าง รองรับการเปลี่ยนธีมและการขยาย transformer เช่น @rspress/plugin-twoslash นำเสนอผลลัพธ์การแสดงบล็อกโค้ดที่หลากหลายมากขึ้น.
- ประสบการณ์การพัฒนาเอกสาร: ปรับปรุง HMR ของไฟล์ nav.json, meta.json และเพิ่ม json schema สำหรับการแนะนำโค้ดใน IDE; เปิดใช้งานฟังก์ชันการตรวจสอบลิงก์ที่ตายแล้วโดยค่าเริ่มต้น; เพิ่มไวยากรณ์บล็อกโค้ดไฟล์ รองรับการอ้างอิงไฟล์ภายนอก; @rspress/plugin-preview และ @rspress/plugin-playground รองรับการใช้งานพร้อมกัน.
- การรวม Rslib: ตอนนี้สามารถเลือก Rspress เป็นเครื่องมือเอกสารเมื่อใช้ create-rslib เพื่อสร้างโครงการไลบรารีคอมโพเนนต์ ทำให้สามารถสร้างเว็บไซต์เอกสารคอมโพเนนต์ได้อย่างรวดเร็ว.
ฟีเจอร์ใหม่ใน 2.0
ธีมใหม่
ธีมเริ่มต้นใน 2.0 ได้รับการอัปเกรดอย่างเป็นระบบ โดยได้รับการออกแบบโดยนักออกแบบทีม @Zovn Wei ซึ่งมีการปรับปรุงในด้านประสิทธิภาพการมองเห็นและประสบการณ์การอ่านอย่างมาก และแต่ละคอมโพเนนต์สามารถเปลี่ยนแปลงได้อย่างอิสระ มีความสามารถในการปรับแต่งสูง.
การปรับแต่งธีม
ตามระดับการปรับแต่งจากต่ำไปสูง มีวิธีการปรับแต่งธีมสี่ประเภท ได้แก่ ตัวแปร CSS, ชื่อคลาส BEM, การส่งออกใหม่ ESM, และการ eject คอมโพเนนต์.- CSS ตัวแปร: ธีมใหม่ได้เปิดเผย CSS ตัวแปรมากขึ้น ซึ่งครอบคลุมสีธีม, บล็อกโค้ด, สไตล์หน้าแรก เป็นต้น คุณสามารถดูตัวอย่างและปรับแต่ง CSS ตัวแปรทั้งหมดได้อย่างโต้ตอบในหน้า CSS ตัวแปร เมื่อคุณพบการตั้งค่าที่พอใจแล้ว สามารถคัดลอกไปใช้ในโปรเจกต์ได้ทันที.
- BEM ชื่อคลาส: คอมโพเนนต์ในตัวตอนนี้ใช้มาตรฐานการตั้งชื่อ BEM นี่เป็นทางเลือกที่ค่อนข้าง Old School แต่ก็เป็นการตัดสินใจที่เราคิดอย่างรอบคอบ ผู้ใช้สามารถปรับแต่งสไตล์ได้อย่างแม่นยำผ่านตัวเลือก CSS โครงสร้าง HTML ชัดเจนยิ่งขึ้น.
- การส่งออก ESM ใหม่: หากการเปลี่ยนแปลงใน CSS ไม่สามารถตอบสนองความต้องการที่กำหนดเองได้ สามารถปรับแต่งได้ลึกขึ้นผ่าน JS ใน theme/index.tsx โดยใช้การส่งออก ESM สามารถ แทนที่ คอมโพเนนต์ในตัวของ Rspress ได้ทุกตัว.
- คอมโพเนนต์ eject: คุณสามารถใช้คำสั่ง rspress eject [component] ใหม่ล่าสุด คำสั่งนี้จะคัดลอกโค้ดต้นฉบับของคอมโพเนนต์ที่ระบุไปยังไดเรกทอรี theme/components/ คุณสามารถแก้ไขโค้ดเหล่านี้ได้อย่างอิสระ หรือแม้แต่ส่งให้ AI แก้ไขเพื่อให้ได้การปรับแต่งที่ลึกซึ้ง.
แถบการนำทาง, แถบด้านข้างแท็ก
Rspress 2.0 ได้ดำเนินการสร้างคอมโพเนนต์แท็ก ตอนนี้สามารถใช้คุณสมบัติแท็กใน frontmatter เพื่อทำการทำเครื่องหมาย 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) แต่แตกต่างตรงที่มันจะเรนเดอร์หน้าเว็บของคุณเป็นไฟล์ Markdown แทนที่จะเป็นไฟล์ HTML และสร้างไฟล์ที่เกี่ยวข้องกับ llms.txt และ llms-full.txt.
การเน้นโค้ดในบล็อกด้วย ShikiRspress 2.0 ใช้ Shiki เป็นค่าเริ่มต้นสำหรับการไฮไลท์โค้ด เมื่อเปรียบเทียบกับวิธีการไฮไลท์ในระหว่างการทำงานของ 1.x ที่ใช้ prism, Shiki จะทำการไฮไลท์ในระหว่างการคอมไพล์
- รองรับหลายธีมสไตล์ เช่น ในหน้า CSS variables สามารถสลับและดูตัวอย่างธีม Shiki ที่แตกต่างกันได้แบบโต้ตอบ
- ในขณะเดียวกัน Shiki ยังอนุญาตให้ใช้ transformer ที่กำหนดเองเพื่อขยายความสามารถในการเขียน เช่น twoslash เป็นต้น
- นำเข้าภาษาโปรแกรมตามความต้องการ ไม่เพิ่มค่าใช้จ่ายในการทำงานและขนาดของแพ็คเกจ
- อิงจากไวยากรณ์ TextMate เพื่อให้การไฮไลท์ไวยากรณ์ที่แม่นยำเหมือนกับ VS Code
การปรับปรุงประสิทธิภาพการสร้าง
Rspress 2.0 ขับเคลื่อนโดย Rsbuild และ Rspack 2.0 รุ่นพรีวิว และเปิดใช้งานการคอมไพล์ตามความต้องการและการแคชถาวรโดยค่าเริ่มต้น
การคอมไพล์ตามความต้องการ
เปิดใช้งาน dev.lazyCompilation โดยค่าเริ่มต้น ซึ่งจะทำการคอมไพล์เฉพาะเมื่อคุณเข้าถึงหน้าใดหน้าหนึ่ง ทำให้ความเร็วในการเริ่มต้นการพัฒนาสูงขึ้นอย่างมาก และสามารถทำให้การเริ่มต้นเย็นในระดับมิลลิวินาที Rspress ยังได้ดำเนินการกลยุทธ์การโหลดล่วงหน้าของเส้นทาง เมื่อเมาส์ชี้ไปที่ลิงก์ จะทำการโหลดหน้าเส้นทางเป้าหมายล่วงหน้า ร่วมกับ lazyCompilation เพื่อให้ประสบการณ์การพัฒนาที่ไม่มีการสูญเสีย
การแคชถาวร
2.0 ยังเปิดใช้งานการแคชถาวรโดยค่าเริ่มต้น ซึ่งจะนำผลลัพธ์การคอมไพล์ครั้งก่อนมาใช้ใหม่ในระหว่างการเริ่มต้นร้อน เพิ่มความเร็วในการสร้างขึ้น 30%-60% ซึ่งหมายความว่าเมื่อคุณรัน rspress dev หรือ rspress build เป็นครั้งแรก ความเร็วในการเริ่มต้นในครั้งถัดไปจะเพิ่มขึ้นอย่างเห็นได้ชัด
ประสบการณ์การพัฒนาสำหรับเอกสาร
เปิดใช้งานการตรวจสอบลิงก์เสียโดยค่าเริ่มต้น
Rspress 2.0 เปิดใช้งานฟังก์ชันการตรวจสอบลิงก์เสียโดยค่าเริ่มต้น ในระหว่างกระบวนการสร้าง จะทำการตรวจสอบลิงก์ที่ไม่ถูกต้องในเอกสารโดยอัตโนมัติ ช่วยให้คุณสามารถค้นพบและแก้ไขได้ทันเวลา
บล็อกโค้ดไฟล์
คุณสามารถใช้คุณสมบัติ file="./path/to/file" เพื่ออ้างอิงไฟล์ภายนอกเป็นเนื้อหาของบล็อกโค้ด โดยการเก็บโค้ดตัวอย่างไว้ในไฟล์แยกต่างหาก
การใช้งาน 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: ให้ความสามารถในการสร้าง llms.txt สำหรับโปรเจกต์ที่ไม่รองรับ SSG และ SSG-MD
- @rspress/plugin-sitemap: สร้างไฟล์ Sitemap โดยอัตโนมัติเพื่อปรับปรุง SEO
การเปลี่ยนแปลงที่สำคัญ
การย้ายจาก 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
