[openclaw] 프론트엔드 성능 최적화: 엔트리 CSS 번들 다이어트와 코드 스플리팅 전략

PR 링크: openclaw/openclaw#110687 상태: Merged | 변경: +61 / -51

들어가며

최근 openclaw 프로젝트의 CI 환경에서 Control UI의 성능 예산(Performance Budget) 위반 문제가 지속적으로 발생했습니다. 원인은 엔트리 스타일시트(ui/src/styles.css)가 비대해지면서 초기 로딩 시 필요한 CSS 크기가 허용치인 42KB를 초과했기 때문입니다. 본 글에서는 이 문제를 해결하기 위해 어떻게 스타일을 레이지 로딩 모듈로 분리하고, 초기 로딩 성능을 최적화했는지 살펴봅니다.

코드 분석

1. 엔트리 스타일시트 최적화 (ui/src/styles.css)

기존에는 모든 페이지의 스타일이 엔트리 파일에 통합되어 있었습니다. 이를 각 페이지가 필요한 시점에 로드하도록 변경했습니다.

-@import "./styles/approval.css";
-@import "./styles/config.css";
-@import "./styles/config-quick.css";
+@import "./styles/approval-boot.css";
 @import "./styles/settings.css";
-@import "./styles/lobster-pet.css";

핵심은 approval-boot.css를 새로 생성하여, 초기 렌더링(hydration 이전)에 필요한 최소한의 스타일만 남기고 나머지는 각 컴포넌트 내부로 이동시킨 것입니다.

2. 레이지 로딩 모듈로 스타일 이전

각 페이지나 컴포넌트가 자신의 스타일을 직접 import하도록 수정했습니다. 예를 들어 lobster-pet.ts 컴포넌트는 이제 스스로 스타일을 관리합니다.

+// ui/src/components/lobster-pet.ts
+import "../styles/lobster-pet.css";

이러한 방식은 해당 컴포넌트가 사용되는 페이지가 로드될 때만 CSS가 브라우저에 전달되도록 보장합니다.

왜 이게 좋은가

이번 최적화의 핵심은 '초기 로딩 페이로드 감소'입니다.

1. 성능 수치: 초기 로딩 CSS 크기를 42.0 KiB에서 36.0 KiB(gzip 기준)로 약 14% 감축했습니다. 이를 통해 성능 예산(Budget)을 38 KiB로 타이트하게 조정하여 향후 스타일이 무분별하게 엔트리에 추가되는 것을 방지했습니다.
2. 트레이드 오프: 전체 CSS 크기는 약 2.4 KiB 증가했습니다. 이는 여러 청크에서 스타일이 중복 로드될 수 있기 때문이지만, 초기 로딩 속도 향상이라는 비즈니스 가치가 훨씬 크다고 판단했습니다.
3. 교훈: 모든 스타일을 하나의 엔트리 파일에 넣는 것은 초기 로딩 성능에 치명적입니다. 컴포넌트 기반 아키텍처에서는 스타일도 컴포넌트와 함께 레이지 로딩하는 것이 성능 최적화의 정석입니다.

결론

이번 PR은 단순히 CSS를 옮기는 작업을 넘어, 성능 예산 관리와 코드 스플리팅 전략을 결합한 훌륭한 사례입니다. 특히 approval-boot.css와 같이 런타임 초기 렌더링에 필요한 최소한의 스타일만 엔트리에 남기는 전략은 복잡한 SPA 환경에서 매우 유용합니다.

참고 자료

• https://vitejs.dev/guide/features.html#css-code-splitting

⚠️ 알림: 이 분석은 AI가 실제 코드 diff를 기반으로 작성했습니다.