[디자인 시스템 어떻게 만들었어요?(3)] Tree Shaking과 구형 브라우저 대응
23
AI 요약
이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.
이 게시물은 외부 라이브러리가 서비스 번들에 미치는 영향과 구형 브라우저 대응 방안을 다룹니다.
Tree Shaking 핵심
- ESM 기반의 정적 import/export 필요성
- package.json의 sideEffects 필드로 번들러 최적화 유도
- 단일 파일 번들링, Barrel 파일, 서드파티 병합 시 Tree Shaking 저해
빌드 및 배포 전략
- preserveModules 또는 Multi-entry로 모듈 경계 유지
- external 설정으로 외부 의존성 분리
- optimizePackageImports로 Barrel Import의 Direct Import 효과 구현 가능
구형 브라우저 대응
- Compile/Transpile/Polyfill 개념 구분
- 라이브러리 대신 서비스에서 하위 호환성 책임을 맡기는 전략 선택
- transpilePackages와 커스텀 폴리필로 Polyfill 사각지대 보완
![[디자인 시스템 어떻게 만들었어요?(2)] Radix Primitives와 Panda CSS로 유연하고 단단한 컴포넌트 만들기](/icons/yogiyo.svg){kind=icon}
