[디자인 시스템 어떻게 만들었어요?(3)] Tree Shaking과 구형 브라우저 대응

본 글은 요기요 디자인 시스템(YDS) v2 컴포넌트 라이브러리 구축 경험을 바탕으로, 외부 라이브러리가 서비스 애플리케이션 번들 결과물에 미치는 영향과 구형 브라우저 하위 호환성 확보 방안을 다룹니다. js가 알아서 Tree Shaking을 해줄 것'이라는 오해를 지적하며, 라이브러리가 Tree Shaking이 가능한 요건(모듈 시스템, Side-Effect 관리, 모듈 트리 구조 유지 등)을 충족하지 못하면 프레임워크의 최적화 기능이 무용지물이 될 수 있음을 설명합니다.

이를 해결하기 위한 요기요 FE 팀의 기술적인 고민과 해결 과정을 공유하여, 라이브러리 개발 시 번들 최적화와 브라우저 호환성 확보의 중요성을 강조합니다. 개발 시 번들 최적화와 브라우저 호환성 확보의 중요성을 강조합니다.