Next.js 환경에서 Tree Shaking과 구형 브라우저 호환성 확보 노하우 공개

요기요 FE팀은 Next.js 기반의 YDS v2 컴포넌트 라이브러리 구축 과정에서 번들 사이즈 최적화의 중요성을 인지하고, Tree Shaking 전략을 고도화함

라이브러리 코드의 ESM 지원, sideEffects 설정, 모듈 구조 유지를 통해 불필요한 코드 제거를 극대화하여 번들 크기를 감소시킴

Next.js의 `transpilePackages` 옵션을 활용하여 외부 라이브러리까지 browserslist 설정에 맞춰 트랜스파일(Transpile)하여 구형 브라우저 호환성을 확보함

Custom Polyfill 서비스를 구축하여, 요기요 Native 앱의 특수한 User-Agent 환경에서도 최적화된 폴리필을 제공함

결과적으로, YDS v2 라이브러리 적용 후 번들 사이즈 98% 감소를 달성하여 사용자 경험을 개선함

Tree Shaking의 핵심 원리

본문에서는 Tree Shaking이 ESM(ESM) 기반 모듈 시스템에서 효과적으로 작동하며, 번들러(Bundler)가 사용되지 않는 코드를 제거하는 과정이라고 설명한다.

ESM 채택: 정적 import/export 구문 분석을 통해 모듈 간 의존성 파악

sideEffects 설정: `package.json`의 `sideEffects` 필드를 통해 번들러에게 Side-Effect 여부 명시

모듈 구조 유지: 모듈 트리를 온전히 유지하여 번들러가 불필요한 코드 제거

결과적으로, 라이브러리 개발 시 모듈의 물리적 독립성 확보가 Tree Shaking의 핵심이며, 이는 번들 사이즈 최적화의 핵심 요소이다.

번들 사이즈 최적화를 위한 전략

요기요 FE팀은 Tree Shaking 실효성을 높이기 위해 라이브러리 코드 구조를 개선하고, Next.js의 기능을 적극 활용했다.

ESM 배포: ESM(ESM) 형식으로 라이브러리를 배포하여 번들러가 코드 분석 용이하게 함

sideEffects 설정: `sideEffects: false` 설정을 통해 모든 파일에 Side-Effect가 없음을 명시

모듈 경계 유지: Rollup의 preserveModules: true 설정을 통해 모듈 구조를 유지

Multi-entry 방식: Multi-entry 방식을 활용하여 필요한 기능만 명시적으로 빌드

이러한 노력으로 YDS v2 라이브러리 적용 후 번들 사이즈 98% 감소라는 놀라운 성과를 달성했다.

구형 브라우저 호환성 확보 방법

요기요 FE팀은 Next.js 환경에서 구형 브라우저 호환성을 위해 Compile, Transpile, Polyfill 개념을 명확히 구분하고, 각 단계별 전략을 수립했다.

Transpile: Next.js의 browserslist 설정을 통해 코드 변환

transpilePackages 옵션: 외부 라이브러리까지 browserslist 설정에 맞춰 Transpile

Polyfill: Custom Polyfill 서비스를 구축하여 User-Agent 기반 동적 Polyfill 제공

특히, Custom Polyfill 서비스는 요기요 Native 앱의 특수한 User-Agent 환경에 최적화된 폴리필을 제공하여, 불필요한 코드 로딩을 방지했다.

Next.js의 Browser Support와 TranspilePackages

Next.js는 기본적으로 Modern Browser를 지원하며, `browserslist` 설정을 통해 지원 브라우저 범위를 설정할 수 있다. 또한, `transpilePackages` 옵션을 사용하여 외부 라이브러리까지 browserslist 설정에 맞춰 트랜스파일(Transpile)할 수 있다.

browserslist 설정: 프로젝트의 타겟 브라우저 사양을 정의

transpilePackages 옵션: node_modules에 포함된 외부 라이브러리를 Transpile 대상에 포함

주의사항: browserslist와 next-polyfill-module이 모든 하위 호환성 문제를 해결하지는 않음

결과적으로, `transpilePackages` 옵션은 서비스의 타겟 브라우저 사양에 맞춰 외부 라이브러리를 최적화하는 데 기여한다.