피드로 돌아가기
토스 기술블로그Frontend
원문 읽기
토스 기술블로그Lodash 대비 번들 크기 30배 감소 및 최대 10배 속도 개선을 달성한 es-toolkit
es-toolkit: How a Small Internal Library Became a Global Project
AI 요약
Context
기존 Lodash의 구형 코드 구조와 IE 등 레거시 브라우저 지원을 위한 방어 로직이 현대 웹 환경에서 불필요한 오버헤드로 작용함. 특히 ESM(ECMAScript Modules) 미지원으로 인한 Tree-shaking 제약이 번들 사이즈 최적화를 저해하는 병목 지점으로 파악됨.
Technical Solution
- 현대적 브라우저의 Native 함수(Array#map 등)를 직접 활용한 로직 단순화
- 레거시 브라우저 대응을 위한 방어 코드 및 불필요한 폴리필 전면 제거
- ESM 기본 지원 설계를 통한 Tree-shaking 효율 극대화 및 전송량 최적화
- @toss/utils의 실무 검증 사례를 기반으로 80% 이상의 일반적 사용 사례에 최적화된 경량 인터페이스 설계
- Node.js, Deno, Bun 등 다양한 런타임 환경을 고려한 범용성 확보 및 서버 사이드 유틸리티 확장
실천 포인트
- 프로젝트 내 의존성 라이브러리가 최신 브라우저 표준 API를 활용하고 있는지 검토 - Tree-shaking이 가능한 ESM 패키지인지 확인하여 번들 사이즈 낭비 요소 제거 - 모든 엣지 케이스 대응보다 빈번하게 발생하는 80%의 유스케이스에 집중한 경량화 설계 적용