React 앱 성능 향상: Lazy Import & Suspense로 번들 크기 줄이기

제목

♻️ 번들링 크기 줄이고 브라우저 성능 향상시키기 [ lazy import + suspense와 react-router 적극활용 ]

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • *프론트엔드 개발자, SPA 애플리케이션 최적화 필요자**
  • *난이도**: 중급 (React 및 React Router 기초 지식 필요)

핵심 요약

  • FSD(Folder Structure Driven) 아키텍처를 도메인 단위로 구조화하여 유지보수성 향상
  • lazy()Suspense를 활용한 동적 임포트 + React Router 코드스플리팅으로 초기 번들 크기 58% 감소
  • SPA의 초기 렌더 지연 문제 해결을 위한 코드스플리팅 전략 강조

섹션별 세부 요약

1. FSD 기반 폴더 구조 설계

  • 도메인별로 페이지, 상태, API, UI 컴포넌트를 묶어 모듈화된 코드 구조 구현
  • React Query, Zustand, Custom Hook 등 상태 관리 도메인 별 스코핑 가능
  • Electron, React Native 확장성 고려 시 features/XXX 모듈 선택적 마운트 가능

2. lazy import + suspense로 번들링 최적화

  • lazy(() => import("./AuthPage"))런타임에만 모듈 로드
  • Suspense 경계로 감싸서 로딩 상태 관리 및 UI 캐싱
  • React Router createBrowserRouter를 활용한 라우트 레벨 코드스플리팅
  • dist/assets/Canvas-BXSx-WT0.js 청크 로드 시 추가 성능 저하 가능성 경고

3. 성능 개선 결과 및 전략

  • 초기 번들 크기 3379.43kb → 1423.54kb (58% 감소)
  • 네트워크 전송량, 파싱, 실행 시간 감소로 초기 로드 속도 2.4배 향상
  • SSR 대신 CSR + 코드스플리팅 선택 (SEO 불필요, Electron 확장 가능성 고려)

결론

  • FSD + 코드스플리팅을 통해 초기 번들 크기와 로드 시간을 드라마틱하게 개선 가능
  • lazy()Suspense동적 임포트 필수이며, 청크 단위의 코드스플리팅을 통해 추가 성능 향상 가능
  • Electron 확장성 고려 시 CSR 기반 전략이 적합한 프로젝트 최적화 가이드라인 제공