핵심 요약
요기요 FE팀은 YDS v2 라이브러리의 번들 최적화와 구형 브라우저 대응을 실제 서비스에 적용한 경험을 공유합니다. Tree Shaking의 효과를 높이려 모듈 경계와 sideEffects를 명시하고, preserveModules와 Multi-entry 구성을 활용했습니다. Next.js에서 transpilePackages로 외부 라이브러리 트랜스파일링을 강화하고, next-polyfill-module과 Custom Polyfill 서비스로 하위 호환을 보완했습니다. 그 결과 번들 크기가 1.58MB에서 29kB로 대폭 감소했습니다.
구현 방법
- ESM 기반 모듈 구조 유지 및 파일 단위 분리(preserveModules)
- 다중 진입점 및 Barrel File 관리로 의존성 트레이스 최적화
- Next.js transpilePackages로 라이브러리 트랜스파일링 적용
- 폴리필 전략: next-polyfill-module + Custom Polyfill 서비스
주요 결과
- 번들 크기 1.58MB → 29kB로 대폭 감소
- 구형 브라우저에서 하위 호환성 확보 및 안정성 향상
