- Vercel đã công bố kho lưu trữ có cấu trúc
React-Best-Practices, được xây dựng dựa trên hơn 10 năm kinh nghiệm tối ưu hiệu năng với React và Next.js
- Kho lưu trữ này được thiết kế để các tác nhân AI và LLM có thể đưa ra các quyết định tối ưu hóa nhất quán khi review code hoặc refactor
- Trọng tâm là ưu tiên loại bỏ waterfall và giảm kích thước bundle, đồng thời bao gồm 8 danh mục từ hiệu năng server, client đến rendering
- Mỗi quy tắc đều đi kèm mức độ quan trọng (CRITICAL~LOW) cùng ví dụ code sai và ví dụ sửa đúng
- Đây là các quy tắc đã được kiểm chứng trong môi trường production thực tế, hỗ trợ tối ưu hóa tự động thông qua tích hợp với coding agent
Tổng quan về React Best Practices
react-best-practices là kho lưu trữ tổng hợp kiến thức tối ưu hóa được tích lũy hơn 10 năm với React và Next.js
- Được cấu trúc để các tác nhân AI và LLM có thể tham khảo khi phân tích code và đề xuất cải tiến
- Các vấn đề hiệu năng trong React thường xuất hiện dưới dạng xử lý triệu chứng chậm đi sau khi phát hành
- Những nguyên nhân chính được chỉ ra gồm thực thi tuần tự các tác vụ bất đồng bộ, bundle phía client ngày càng phình to và re-render không cần thiết
- Những vấn đề này hoạt động như các điểm nghẽn cấu trúc tạo ra chi phí lặp lại trên mọi phiên người dùng
Ý tưởng cốt lõi: tối ưu hóa theo mức độ ưu tiên
- Phần lớn nỗ lực cải thiện hiệu năng thường bắt đầu từ tầng thấp hơn của stack và thất bại
- Ví dụ, nếu waterfall request thêm 600ms thì tối ưu
useMemo sẽ không còn nhiều ý nghĩa
- Nếu mỗi trang đều gửi thêm 300KB JavaScript không cần thiết thì các tối ưu vi mô trong vòng lặp cũng không hiệu quả
- Framework bắt đầu từ hai biện pháp cốt lõi
- Loại bỏ waterfall
- Giảm kích thước bundle
- Sau đó mở rộng lần lượt sang hiệu năng server, data fetching phía client và tối ưu re-render
- Có tổng cộng 8 danh mục và hơn 40 quy tắc được sắp xếp theo thứ tự mức độ quan trọng
- Mức CRITICAL tập trung vào loại bỏ waterfall và giảm bundle, còn mức LOW dành cho các pattern nâng cao
Các danh mục chính được bao gồm
- Kho lưu trữ đề cập đến 8 lĩnh vực hiệu năng sau
- Loại bỏ async waterfall
- Tối ưu kích thước bundle
- Hiệu năng server
- Data fetching phía client
- Tối ưu re-render
- Hiệu năng rendering
- Pattern nâng cao
- Hiệu năng JavaScript
- Mỗi quy tắc đều cung cấp mức độ ảnh hưởng (CRITICAL~LOW) cùng ví dụ code sai và ví dụ đã sửa
- Ví dụ: code chờ dữ liệu ở mọi nhánh do gọi
await không cần thiết → sửa lại thứ tự điều kiện để chỉ chờ khi thực sự cần
- Tất cả file quy tắc đều được biên dịch thành
AGENTS.md, cho phép các tác nhân AI tham chiếu trực tiếp khi review code
Tập hợp quy tắc dựa trên các trường hợp thực tế
- Tất cả quy tắc đều dựa trên kinh nghiệm cải thiện hiệu năng trong các codebase production thực tế
- Gộp vòng lặp: giảm code phải quét danh sách tin nhắn 8 lần xuống còn 1 lần để tăng hiệu quả xử lý dữ liệu quy mô lớn
- Song song hóa tác vụ bất đồng bộ: chạy song song các lời gọi DB không phụ thuộc lẫn nhau để rút ngắn một nửa tổng thời gian chờ
- Điều chỉnh font fallback: khi dùng font hệ thống, tinh chỉnh khoảng cách ký tự để vẫn hiển thị tự nhiên ngay cả ở trạng thái fallback
Tích hợp với coding agent
react-best-practices được cung cấp dưới dạng gói Agent Skills, có thể cài đặt cho nhiều coding agent khác nhau
- Có thể dùng với Opencode, Codex, Claude Code, Cursor, v.v.
- Khi tác nhân phát hiện các lệnh gọi
useEffect lồng nhau hoặc các import phía client nặng, nó có thể tham chiếu quy tắc tương ứng để đề xuất chỉnh sửa
- Lệnh cài đặt:
npx add-skill vercel-labs/agent-skills
- Có thể xem toàn bộ repository trên GitHub tại
react-best-practices
2 bình luận
https://ywc.life/posts/vercel-react-best-practice
Tôi đã thử dịch toàn bộ bài viết.
Cảm ơn! Tôi sẽ đọc kỹ.