Read Original
#Frontend

es-toolkit: How a Small Internal Library Became a Global Project

es-toolkit: How a Small Internal Library Became a Global Project
01

Summary

lodash보다 10배 빠르다! 전 세계를 사로잡은 토스의 'es-toolkit' 탄생기

번들 사이즈 97% 감소, 성능은 극대화—국산 오픈소스가 글로벌 표준이 된 비결

토스(Toss) 내부에서 시작해 전 세계 프론트엔드 생태계를 뒤흔든 차세대 유틸리티 라이브러리 es-toolkit의 개발 여정을 다룹니다. 레거시와의 결별을 통해 얻은 압도적인 성능 지표와 커뮤니티의 힘으로 글로벌 오픈소스로 성장한 과정을 시니어 엔지니어의 시각에서 공유합니다.

  • 01최신 브라우저 네이티브 API 활용으로 lodash 대비 최대 10배 빠른 성능 달성
  • 02ESM 완벽 지원 및 트리 쉐이킹 최적화로 번들 사이즈 최대 30배 축소
  • 03기존 lodash 환경에서 즉시 교체 가능한 'es-toolkit/compat' 전략
  • 04Yarn, Storybook, Recharts 등 주요 글로벌 오픈소스 공식 채택
  • 05오픈소스 기여를 통해 채용까지 이어진 개발자 데이용(Dayong)의 합류 스토리

RECOMMENDATION

프로젝트의 성능 최적화와 번들 다이어트가 고민이라면 지금 바로 es-toolkit 도입을 검토하세요. 특히 기존 lodash 의존성이 높다면 compat 레이어를 통해 리스크 없이 점진적으로 교체하는 방식을 추천합니다.

The Problem

기존의 lodash는 Internet Explorer와 같은 레거시 브라우저 지원을 위한 방어적 로직과 구식 코드 구조를 유지하고 있어 현대적인 웹 환경에서 불필요하게 무겁고 느렸다. 또한 ESM(ECMAScript Modules) 미지원으로 인해 사용하지 않는 코드를 제거하는 트리 쉐이킹이 어려워 번들 사이즈 최적화에 걸림돌이 되었다.

The Solution

현대적 브라우저가 기본 제공하는 API를 활용해 성능을 극대화하고 ESM 기반으로 설계된 es-toolkit을 개발하였다. 특히 기존 lodash 사용자들이 코드 수정 없이 바로 전환할 수 있도록 인터페이스와 동작을 동일하게 맞춘 호환성 레이어인 'es-toolkit/compat'을 제공하여 도입 장벽을 낮추었다.

The Result

lodash 대비 실행 속도는 최소 2배에서 최대 10배 이상 향상되었으며, 일부 함수에서는 번들 사이즈가 30배 이상 줄어드는 성과를 거두었다. 그 결과 주간 2,000만 회 이상의 다운로드를 기록하고 Yarn Berry, Storybook 등 글로벌 주요 프로젝트에 채택되는 등 전 세계적인 영향력을 확보했다.

Trade-off

주요 유스케이스와 현대적인 표준에 집중하기 위해 lodash가 처리하던 수많은 에지 케이스를 생략할 수 있으나, 이는 compat 레이어를 통해 보완되고 있다. 다만 모든 lodash 기능을 1:1로 완벽히 대체하기 위해서는 라이브러리 유지보수 측면에서 지속적인 노력이 요구된다.

03

Key Concepts

Concept · 01

Tree-shaking

빌드 과정에서 사용되지 않는 코드를 제거하여 최종 결과물의 크기를 줄이는 최적화 기술입니다.

  • es-toolkit은 ESM 기반으로 설계되어 필요한 함수만 선택적으로 번들에 포함시켜 용량을 획기적으로 줄입니다.
Concept · 02

Native Browser API

라이브러리가 별도로 구현하던 복잡한 로직을 현대 브라우저가 표준으로 제공하는 내장 함수로 대체하는 방식입니다.

  • Array#map 등 현대 브라우저의 성능 좋은 기본 기능을 직접 호출하여 라이브러리 자체의 무게를 줄이고 속도를 높였습니다.
Concept · 03

Drop-in Replacement

기존 라이브러리를 제거하고 새로운 라이브러리를 도입할 때 추가적인 코드 수정 없이 바로 작동하는 교체 방식을 의미합니다.

  • es-toolkit/compat은 lodash와 동일한 인터페이스를 제공하여 import 문 변경만으로 성능 이점을 누릴 수 있게 합니다.