Bundling · 하이브리드 코호트

번들 스플릿과 프리로드 설계

번들 스플릿과 프리로드 설계 상세 커버

Vite와 webpack 5를 병행해 차이를 이해하고, 실제 대형 앱 번들 그래프를 분석합니다. prefetch vs preload 결정 트리를 직접 만듭니다.

모듈 구성

  • 번들 분석기 스크립트 세트
  • 동적 import 패턴 카탈로그
  • HTTP/3 고려한 리소스 힌트 실험
  • 캐시 무효화 전략 워크시트
  • 멘토 번들 리뷰 1회
  • 리포지토리 샘플 2종
  • Webpack vs Vite 비교 체크리스트

수료 후 행동

  • 초기 JS 전송량을 라우트 기준으로 예측한다
  • 프리로드 남용을 걸러내는 기준을 문서화한다
  • 캐시 계층과 번들 해시 전략을 맞춘다

질문

코호트 메모

“prefetch 결정 트리가 바로 위키에 올라갔습니다. 다만 샘플 앱이 React 위주라 Vue 팀은 초반 적응에 시간이 걸렸습니다.”
클라이언트 in 리테일