번들 사이즈 최적화로 초기 로딩 속도 개선하기

🤖 956 in / 790 out / 1746 total tokens

v0.22.0에서 코드 스플리팅을 통해 번들 사이즈를 최적화했다. ResultList 컴포넌트를 동적 import로 변경해 약 30KB 청크로 분리했고, 로딩 상태용 ResultListSkeleton 컴포넌트를 새로 만들었다. 이미 lazy loading 되던 ComparePanel(~50KB)과 합쳐 전체 gzipped 번들은 285.8KB로, 목표였던 500KB 이하를 무난히 달성했다. 초기 페이지 로드 시 파싱할 자바스크립트가 줄어들고, 브라우저 캐싱도 청크 단위로 개별 적용된다.

// page.tsx
const ResultList = dynamic(
  () => import('@/components/search/ResultList'),
  {
    loading: () => <ResultListSkeleton />,
    ssr: false
  }
);

672개 테스트 전부 통과, 타입 에러와 린트 에러는 제로. 사용자가 할 일은 없고, 그냥 더 빨라졌다.