GitHub Primer 디자인 시스템의 CSS Modules 도입
Improving site performance by shipping more CSS
GitHub의 Primer 디자인 시스템은 CSS-in-JS 솔루션의 성능 문제를 해결하기 위해 CSS Modules로의 전환을 결정했다. 2023년부터 페이지의 컴포넌트 수가 증가하면서 초기 페이지 로드 시간이 길어지고 서버 사이드 렌더링 성능이 저하되었다. CSS Modules 도입으로 모든 스타일을 CSS 파일에 작성하고, 클래스 이름을 기본적으로 로컬로 처리하여 충돌을 방지할 수 있게 되었다. 2024년 12월까지 모든 컴포넌트가 CSS Modules로 마이그레이션되었고, 서버 사이드 렌더링 시간은 55% 감소했으며, 페이지 내 컴포넌트 초기화 시간은 25% 줄어들었다.
CSS Modules 도입으로 서버 사이드 렌더링 성능이 55% 향상되었다.
원문 출처
GitHub Blog