Toss Frontend Team이 ES Modules와 TypeScript 기반으로 es-toolkit을 개발해 lodash 대비 bundle size 97% 감소와 2x 성능 향상을 달성했다

Context

lodash는 JavaScript 초기 기능 부족 시기에 만들어 수백만 프로젝트의 기반이 되었다. 그러나 pre-ES Modules 구조로 인해 tree-shaking 제한, 내부 의존성 포함, @types/lodash 별도 설치 필요 등 한계가 존재했다. bundle size가 Core Web Vitals에 직접 영향을 미치는 현대 웹 환경에서는 이러한 구조가 병목으로 작용했다.

Technical Solution

• Toss Frontend Team → ES Modules 방식으로 각 함수를 완전히 독립적인 모듈로 설계
• bundle size → 내장 의존성 제거로 함수별 包体积 최소화
• runtime performance → V8, SpiderMonkey 엔진 최적화 패턴 적용
• TypeScript → 소스 코드와 타입 정의를同一 위치에 배치
• migration → es-toolkit/compat를 통해 100% drop-in replacement 지원

Impact

5개 함수(groupBy, keyBy, pick, omit, debounce) 사용 시 bundle size가 30KB에서 1KB로 감소했다.每周 npm 下载量 1,000만회를 돌파했으며 Microsoft, Yarn, Storybook, IBM, Recharts 등이 채택했다.

Key Takeaway

모던 웹 환경(ES Modules 표준화, TypeScript 기본화, 엔진 성능 향상)에 맞춰 아키텍처를从头设计하면 기존 라이브러리의 근본적 한계를 극복할 수 있다.