제목
♻️ 번들링 크기 줄이고 브라우저 성능 향상시키기 [ 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 기반 전략이 적합한 프로젝트 최적화 가이드라인 제공