[FIX]Vite manualChunks를 통한 핵심 라이브러리 우선 로딩 적용

[Anas-wg]

문제 상황

> npx vite-bundle-analyzer
vite v7.0.0 building for production...
✓ 254 modules transformed.
dist/assets/starfield.worker-D80DUE6N.js        1.28 kB
dist/index.html                                 1.39 kB │ gzip:   0.72 kB
dist/assets/slick-BlzDm7g2.svg                  2.15 kB │ gzip:   0.92 kB
dist/assets/ajax-loader-BcnMEykj.gif            4.18 kB
dist/assets/web_light_sq_ctn@3x-CACm0vf1.png    7.10 kB
dist/assets/naver_login_icon-8sWvjQNp.png       9.71 kB
dist/assets/index-2unJVm56.css                109.73 kB │ gzip:  18.34 kB
dist/assets/howler-DcCpAGke.js                 36.91 kB │ gzip:  10.11 kB
dist/assets/index-C-D2fijq.js                 616.57 kB │ gzip: 188.72 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
9 chunks of 766.98 KB (gzip: 273.13 KB | map: 2.69 MB)
✓ built in 3.01s
server run on  http://localhost:8888

빌드시 초기에 내려보내는 번들의 크기가 너무 큼

문제 원인

vite.config.ts에서 아무런 설정없이, 모든 라이브러리를 초기 로딩시 전부 로딩

해결 방법

react-vendor: React 핵심 라이브러리 (자주 변경되지 않음)
router: 라우팅 기능 (페이지 전환 시에만 필요)
ui: UI 컴포넌트들 (사용자 인터랙션 시 필요)
state: 상태 관리 (애플리케이션 전반에 걸쳐 사용)
network: 네트워크 통신 (API 호출 시에만 필요)
utils: 유틸리티 함수들 (필요에 따라 사용)

으로 6가지로 카테고리화 및, 초기로딩시 핵심 라이브러리만 로딩 진행

성능개선(Local 환경기준, Web Vitals 라이브러리로 측정)

• 적용 전

• 적용 후

1. FCP 개선

2. 메인 번들 용량 감소

vite v7.0.0 building for production...
✓ 254 modules transformed.
dist/assets/starfield.worker-D80DUE6N.js        1.28 kB
dist/index.html                                 1.85 kB │ gzip:   0.83 kB
dist/assets/slick-BlzDm7g2.svg                  2.15 kB │ gzip:   0.92 kB
dist/assets/ajax-loader-BcnMEykj.gif            4.18 kB
dist/assets/web_light_sq_ctn@3x-CACm0vf1.png    7.10 kB
dist/assets/naver_login_icon-8sWvjQNp.png       9.71 kB
dist/assets/index-2unJVm56.css                109.73 kB │ gzip:  18.34 kB
dist/assets/state-M4wSQHVW.js                   0.61 kB │ gzip:   0.39 kB
dist/assets/utils-CE97ds4l.js                   9.67 kB │ gzip:   4.31 kB
dist/assets/react-vendor-Tt9FPAzf.js           12.47 kB │ gzip:   4.42 kB
dist/assets/router-CTTlqAN8.js                 34.54 kB │ gzip:  12.74 kB
dist/assets/howler-Bc2xY9HH.js                 36.91 kB │ gzip:  10.11 kB
dist/assets/network-BLON8SbR.js                76.70 kB │ gzip:  26.53 kB
dist/assets/ui-Cn5GNOCJ.js                     97.04 kB │ gzip:  28.01 kB
dist/assets/index-BtXWjeJD.js                 384.34 kB │ gzip: 111.50 kB
15 chunks of 765.28 KB (gzip: 272.09 KB | map: 2.69 MB)