Tối ưu hóa hiệu năng GitHub: Hành trình chuyển đổi từ CSS-in-JS sang CSS Modules

Hệ thống thiết kế Primer là nền tảng cốt lõi cho mọi giao diện trên GitHub. Tuy nhiên, đến năm 2023, sự gia tăng đột biến về số lượng thành phần (component) đã bộc lộ những hạn chế của giải pháp CSS-in-JS hiện tại: thời gian tải trang ban đầu kéo dài, hiệu năng Server-Side Rendering (SSR) suy giảm và việc quản lý kiểu dáng trở nên quá tải.

Chuyển hướng sang CSS Modules

Để giải quyết bài toán này, đội ngũ Primer đã chọn CSS Modules. Giải pháp này cho phép duy trì khả năng đóng gói (encapsulation) giống như CSS-in-JS nhưng loại bỏ hoàn toàn chi phí runtime trên cả client và server. Thay vì xử lý kiểu dáng động, các style được biên dịch thành các file CSS tĩnh, giúp tối ưu hóa tốc độ tải trang.

Chiến lược di chuyển an toàn

Thay vì thay đổi toàn bộ hệ thống cùng lúc, GitHub đã áp dụng chiến lược di chuyển dần dần (incremental migration) với các bước cụ thể:

• Tạo file CSS Modules song song với mã nguồn cũ.
• Sử dụng feature flag để chuyển đổi linh hoạt giữa style cũ và mới.
• Kiểm thử hồi quy hình ảnh (visual regression testing) để đảm bảo tính nhất quán.
• Triển khai theo từng giai đoạn: từ đội ngũ nội bộ đến toàn bộ người dùng GitHub.

Kết quả là đến tháng 12/2024, toàn bộ các thành phần trong Primer đã được chuyển đổi, mang lại mức cải thiện 55% thời gian SSR và 25% thời gian khởi tạo component.

Loại bỏ CSS-in-JS và prop ‘sx’

Thách thức lớn nhất nằm ở prop sx – một công cụ tùy chỉnh giao diện phổ biến nhưng gây tốn kém hiệu năng do tính chất động. Để giải quyết, GitHub đã tạo ra thư viện trung gian @primer/styled-react, cho phép duy trì khả năng tương thích trong khi dần thay thế bằng @primer/react thuần CSS Modules.

Đáng chú ý, trong giai đoạn cuối (tháng 4/2026), đội ngũ đã tận dụng các Copilot coding agent để tự động hóa việc chuyển đổi hơn 800 prop sx còn lại chỉ trong ba tuần. Sau khi xử lý xong vấn đề về chủ đề (theming) vốn phụ thuộc vào styled-components, GitHub đã chính thức vận hành 100% bằng CSS Modules vào tháng 6/2026.

Dự án này không chỉ là một cuộc di chuyển kỹ thuật đơn thuần, mà là một quá trình tái cấu trúc hạ tầng giao diện quy mô lớn, giúp GitHub đạt được hiệu năng vượt trội mà không làm gián đoạn trải nghiệm người dùng.

Nguồn tham khảo: GitHub Blog