JS 성능 최적화: React + Vite로 컴포넌트 지연 로딩 구현
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 애플리케이션 개발자, 웹 성능 최적화에 관심 있는 개발자
핵심 요약
React.lazy
+import()
로 비필수 컴포넌트 지연 로딩 구현- Vite의 자동 코드 분할로
Chart.[hash].js
별도 청크 생성 - 초기 로딩 시간 40% 감소 및 Lighthouse 점수 향상
섹션별 세부 요약
1. 문제 상황
- 현대 앱의 대규모 JS 빌드 문제
- Webpack/Vite의 코드 분할 기능 미활용
- 초기 로딩 시간 증가, TTI(인터랙티브 시간) 저하
2. 해결 방법
React.lazy(() => import('./Chart'))
사용
컴포넌트로 로딩 상태 관리import()
+Promise.all()
으로 다중 컴포넌트 그룹핑
3. Vite의 코드 분할 처리
Chart.[hash].js
별도 청크 생성- 필요 시점에만 로딩되는 지연 로딩 구현
dist/assets/
디렉토리에 자동 분할 처리
4. 추가 팁
- 사용자 경험을 위한
UI 제공 필수 - DevTools 네트워크 탭에서 캐시 비활성화 후 프로파일링
- 성능 저하 영역에 집중적으로 지연 로딩 적용
결론
- 전체 리팩토링보다 성능 저하 영역에 우선 적용
React.lazy
+ Vite 자동 분할 기능 활용
+
사용으로 UX 향상