Vercel เปิดเผยคลังแนวปฏิบัติที่เป็นเลิศสำหรับ React

• Vercel เปิดเผยคลัง React-Best-Practices ที่มีโครงสร้าง โดยอิงจากประสบการณ์การปรับแต่งประสิทธิภาพของ React และ Next.js กว่า 10 ปี
• คลังนี้ถูกออกแบบมาเพื่อให้ เอเจนต์ AI และ LLM สามารถตัดสินใจด้านการปรับแต่งได้อย่างสม่ำเสมอระหว่างการรีวิวโค้ดหรือรีแฟกเตอร์
• แกนหลักคือการให้ความสำคัญกับ การกำจัดวอเทอร์ฟอลและการลดขนาดบันเดิล ก่อน และครอบคลุม 8 หมวดตั้งแต่ประสิทธิภาพฝั่งเซิร์ฟเวอร์ ฝั่งไคลเอนต์ ไปจนถึงการเรนเดอร์
• แต่ละกฎมี ระดับความสำคัญ (CRITICAL~LOW) พร้อมตัวอย่างโค้ดที่ผิดและตัวอย่างการแก้ไข
• เป็นกฎที่ผ่านการตรวจสอบจากกรณีใช้งานจริงในโปรดักชัน และสามารถ รองรับการปรับแต่งอัตโนมัติผ่านการผสานรวมกับโค้ดดิ้งเอเจนต์ ได้

---

ภาพรวมของ React Best Practices

• react-best-practices คือคลังที่รวบรวมองค์ความรู้ด้านการปรับแต่งประสิทธิภาพที่สั่งสมมากว่า 10 ปีของ React และ Next.js
  • ถูกจัดโครงสร้างเพื่อให้เอเจนต์ AI และ LLM ใช้อ้างอิงได้เมื่อวิเคราะห์โค้ดและเสนอแนวทางปรับปรุง
• ปัญหาด้านประสิทธิภาพของ React มักเกิดขึ้นในลักษณะของการแก้อาการที่ช้าลงหลังปล่อยรีลีส
  • สาเหตุหลักที่ถูกชี้คือการรันงานอะซิงก์แบบลำดับต่อเนื่อง บันเดิลฝั่งไคลเอนต์ที่ใหญ่ขึ้น และการรีเรนเดอร์ที่ไม่จำเป็น
• ปัญหาเหล่านี้ทำหน้าที่เป็น คอขวดเชิงโครงสร้างที่สร้างต้นทุนซ้ำในทุกเซสชันของผู้ใช้

แนวคิดหลัก: การปรับแต่งตามลำดับความสำคัญ

• ความพยายามปรับปรุงประสิทธิภาพส่วนใหญ่มัก เริ่มจากเลเยอร์ล่างของสแตกแล้วล้มเหลว
  • ตัวอย่างเช่น หาก request waterfall เพิ่มเวลาอีก 600ms การปรับแต่ง useMemo ก็แทบไม่มีความหมาย
  • หากแต่ละหน้าส่ง JavaScript ที่ไม่จำเป็น 300KB การปรับแต่งลูปเล็กน้อยก็ไม่เกิดผล
• เฟรมเวิร์กนี้เริ่มจาก 2 มาตรการหลัก
  1. กำจัดวอเทอร์ฟอล
  2. ลดขนาดบันเดิล
• จากนั้นจึงขยายไปตามลำดับเป็น ประสิทธิภาพฝั่งเซิร์ฟเวอร์ การดึงข้อมูลฝั่งไคลเอนต์ และการปรับแต่งการรีเรนเดอร์
• มีทั้งหมด 8 หมวดหมู่ และกฎมากกว่า 40 ข้อ ที่จัดเรียงตามลำดับความสำคัญ
  • ระดับ CRITICAL เน้นการกำจัดวอเทอร์ฟอลและลดบันเดิล ส่วนระดับ LOW เป็นแพตเทิร์นขั้นสูง

หมวดหมู่หลักที่รวมอยู่

• คลังนี้ครอบคลุม 8 ด้านของประสิทธิภาพ ดังนี้
  • การกำจัด async waterfall
  • การปรับขนาดบันเดิลให้เหมาะสม
  • ประสิทธิภาพฝั่งเซิร์ฟเวอร์
  • การดึงข้อมูลฝั่งไคลเอนต์
  • การปรับแต่งการรีเรนเดอร์
  • ประสิทธิภาพการเรนเดอร์
  • แพตเทิร์นขั้นสูง
  • ประสิทธิภาพของ JavaScript
• แต่ละกฎมี ระดับผลกระทบ (CRITICAL~LOW) พร้อม ตัวอย่างโค้ดที่ผิดและตัวอย่างที่แก้ไขแล้ว
  • ตัวอย่าง: โค้ดที่รอข้อมูลในทุกสาขาเพราะเรียก await โดยไม่จำเป็น → แก้โดยสลับลำดับเงื่อนไขเพื่อให้รอเฉพาะเมื่อจำเป็น
• ไฟล์กฎทั้งหมดจะถูกคอมไพล์เป็น AGENTS.md ทำให้ เอเจนต์ AI สามารถอ้างอิงได้โดยตรงระหว่างการรีวิวโค้ด

การรวบรวมกฎจากกรณีจริง

• กฎทั้งหมดอ้างอิงจากประสบการณ์การปรับปรุงประสิทธิภาพในโค้ดเบสโปรดักชันจริง
  • การรวมลูป: ลดโค้ดที่สแกนรายการข้อความ 8 รอบให้เหลือเพียงรอบเดียว เพิ่มประสิทธิภาพในการประมวลผลข้อมูลขนาดใหญ่
  • การทำงานอะซิงก์แบบขนาน: รันการเรียกฐานข้อมูลที่ไม่ขึ้นต่อกันแบบขนาน เพื่อลดเวลารอรวมลงครึ่งหนึ่ง
  • การปรับ fallback ของฟอนต์: เมื่อใช้ system font จะปรับระยะห่างตัวอักษรเพื่อให้ยังแสดงผลอย่างเป็นธรรมชาติแม้อยู่ในสถานะ fallback

การผสานรวมกับโค้ดดิ้งเอเจนต์

• react-best-practices ถูกจัดให้เป็น แพ็กเกจ Agent Skills จึงสามารถติดตั้งกับโค้ดดิ้งเอเจนต์หลากหลายตัวได้
  • ใช้งานได้กับ Opencode, Codex, Claude Code, Cursor และอื่นๆ
• หากเอเจนต์ตรวจพบ การเรียก useEffect แบบซ้อนกัน หรือ การอิมพอร์ตฝั่งไคลเอนต์ที่หนักเกินไป ก็สามารถอ้างอิงกฎที่เกี่ยวข้องเพื่อเสนอการแก้ไขได้
• คำสั่งติดตั้ง:
  npx add-skill vercel-labs/agent-skills
• ดูรีโพสิทอรีทั้งหมดได้ที่ GitHub react-best-practices

[ywc0008]

https://ywc.life/posts/vercel-react-best-practice
ลองแปลฉบับเต็มแล้วครับ

[honglu]

ขอบคุณครับ! จะอ่านให้ดีครับ