[디자인 시스템 어떻게 만들었어요?(3)] Tree Shaking과 구형 브라우저 대응
프론트엔드
[디자인 시스템 어떻게 만들었어요?(3)] Tree Shaking과 구형 브라우저 대응
두줄요약
Next.js 환경에서 디자인 시스템 라이브러리의 번들 최적화와 구형 브라우저 대응 방법을 정리했습니다. 모듈 구조 유지, transpilePackages, 폴리필 전략을 통해 서비스 단의 호환성과 성능을 함께 개선했습니다.
핵심 내용
- YDS v2 디자인 시스템 라이브러리가 Next.js 서비스 번들에 미치는 영향 점검
- Tree Shaking 실효성을 높이기 위한 ESM 배포, sideEffects 명시, 모듈 경계 유지, external 분리, preserveModules·Multi-entry 활용
- 구형 브라우저 대응을 위해 transpilePackages와 폴리필 전략을 서비스 애플리케이션에서 관리하는 방식 정리
- Barrel Import로 인한 분석 비용과 startup/rebuild 저하를 줄이기 위한 Direct Import, optimizePackageImports 활용
적용해볼 점
- 라이브러리 배포 시 모듈 구조와 외부 의존성 분리 여부 점검
- 지원 브라우저 범위와 런타임 API 사용 목록을 기준으로 transpile·polyfill 책임 주체 재정의