성능 최적화 - woowa-techcamp-2021/store-4 GitHub Wiki

Code Splitting

React.lazy

• 페이지별 컴포넌트를 lazy하게 로딩하여 초기 로딩 속도를 향상

Webpack chunk 분리

• 비교적 수정이 적은 node_modules와 app의 bundle을 나누어 관리
• chunkhash를 통해 수정되지 않은(node_modules) chunk는 브라우져가 캐싱하여 사용할 수 있도록 함

Assets 사이즈

• 기존 GIF파일(4.2mb)을 webm/mp4(38kb)방식으로 변환하여 로딩 속도 향상 (4.2mb > 38kb. 99%)