chunk file (main + chunkFilename)

1️⃣ 메인 번들 (filename)

🌟 정의: 애플리케이션의 첫 진입점(entry) 코드를 묶는 청크

• 정적 import된 모듈들(index.js → App.js → Header, Home, Footer 등)이 모두 포함
• 브라우저가 최초 로딩 시 반드시 다운로드

📂 예시 파일명

• 프로덕션: releases/static/js/main.1a2b3c4d.js
• 개발: releases/static/js/main.bundle.js

2️⃣ 추가 청크 (chunkFilename)

🌟 정의: 동적 import 또는 SplitChunksPlugin 으로 분리된 “필요할 때 로드” 청크

• React.lazy, import() 로 분리된 컴포넌트
• splitChunks.cacheGroups 설정에 따른 vendors~main 같은 공통 라이브러리

📂 예시 파일명

• 프로덕션:
  • releases/static/js/0.abcd1234.chunk.js (About.js 등 동적 분리)
  • releases/static/js/vendors~main.efgh5678.chunk.js (공통 라이브러리)
• 개발:
  • releases/static/js/0.chunk.js
  • releases/static/js/vendors~main.chunk.js

3️⃣ 핵심 요약

1️⃣ filename → [name]이 기본 main → 정적 모듈 묶음 → 첫 로드

2️⃣ chunkFilename → [name]이 청크 ID/이름 → 동적 분리 모듈 → 지연 로드

3️⃣ 이점 → 초기 번들 사이즈 축소 + 네트워크 효율 극대화

✨ 이렇게 메인 번들과 코드 스플릿 청크를 분리하면,

• 사용자에게 빠른 첫 화면을 제공하고,
• 추후 필요한 코드만 로드해 최적화된 성능을 얻을 수 있습니다!