[Week 1] Bundle Analyzer로 번들 크기 분석

[bigmooon]

📋 작업 설명

webpack-bundle-analyzer를 사용하여 현재 번들 구조 및 크기 분석

🎯 체크리스트

도구 설치

• source-map-explorer 설치

  npm install --save-dev source-map-explorer

• package.json에 스크립트 추가

  {
    "scripts": {
      "analyze": "source-map-explorer 'build/static/js/*.js'"
    }
  }

빌드 및 분석

• 프로덕션 빌드 생성

  npm run build

• Bundle Analyzer 실행

  npm run analyze

• 결과 스크린샷 저장

데이터 수집

• 전체 번들 크기 기록
  • main.js 크기
  • 각 청크 파일 크기
  • gzipped 크기
• 주요 라이브러리 크기 확인
  • React & React-DOM
  • Swiper
  • Recharts
  • react-router-dom
  • 기타 의존성

문제점 파악

• 가장 큰 번들 식별
• 불필요한 의존성 확인
• 코드 스플리팅 필요 부분 파악
• 중복 코드 확인

📊 완료 기준

• Bundle Analyzer 결과 스크린샷 저장
• 각 파일 크기 데이터 기록
• 문제점 목록 작성 (최소 3개)

📈 예상 결과

예상 번들 크기:

• main.js: ~400-500KB
• vendor.js: ~200-300KB
• 총 크기: ~600-800KB (gzipped: ~200-300KB)

주요 큰 라이브러리:

• Swiper: ~120KB
• Recharts: ~85KB
• React: ~130KB

⏱ 예상 시간

1-2시간

🏷 Labels

priority: critical category: performance size: XS week-1

📝 참고 자료

• 03-performance-measurement.md
• Create React App 문서