요기요 FE 팀이 YDS v2 컴포넌트 라이브러리를 구축하며 직면했던 번들 최적화와 하위 호환성 확보에 대한 기술적인 고민과 해결 과정을 공유하는 글입니다. 먼저, Next.js 환경에서 라이브러리가 서비스 애플리케이션의 번들 사이즈에 미치는 영향을 심도 있게 분석합니다. 완전한 Tree Shaking을 구현하기 위해 ESM 채택의 필수성과 Side-Effect 관리, 그리고 모듈 경계를 유지하는 설계 전략이 왜 중요한지 설명합니다. 특히 Barrel File 패턴이 서비스 번들러의 정적 분석에 미치는 부정적인 영향과 이를 극복하기 위한 `preserveModules` 및 Multi-entry 방식의 활용법을 상세히 다룹니다. 또한, 구형 브라우저 대응을 위해 Compile, Transpile, Polyfill의 개념적 차이를 명확히 정의하고, Next.js 환경에서 외부 라이브러리까지 안전하게 트랜스파일하는 `transpilePackages` 옵션 활용법을 소개합니다. 더불어, 유저의 브라우저 환경에 맞춰 최적화된 Polyfill을 제공하기 위해 요기요 FE 팀이 직접 개발한 User-Agent 기반의 Custom Polyfill 서비스 구축 사례를 통해, 번들 크기를 1.58 MB에서 29 kB로 대폭 절감한 놀라운 성과를 보여줍니다.