Read Original
#Frontend

97% Smaller, 2x Faster: How es-toolkit Reached 10 Million Weekly Downloads

97% Smaller, 2x Faster: How es-toolkit Reached 10 Million Weekly Downloads
01

Summary

"lodash는 이제 안녕" 97% 더 가볍고 2배 빠른 'es-toolkit'이 세상을 바꾼 방법

토스(Toss) 프론트엔드 팀이 만든 K-오픈소스, 전 세계 1,000만 개발자의 선택을 받다

현대 웹 개발의 필수 지표인 성능과 번들 사이즈를 잡기 위해 토스 팀이 직접 나섰습니다. 10년 넘게 시장을 독점해온 lodash의 한계를 극복하고, 최신 JavaScript 환경에 최적화된 유틸리티 라이브러리 es-toolkit의 탄생 배경과 압도적인 벤치마크 결과를 공유합니다. 마이크로소프트와 IBM이 먼저 알아보고 도입한 이 프로젝트는 이제 글로벌 프론트엔드 생태계의 새로운 표준이 되고 있습니다.

  • 01lodash 대비 최대 97% 작은 번들 사이즈와 2~3배 빠른 실행 속도
  • 02내부 의존성 없는 독립적 설계로 극대화된 트리 쉐이킹 성능
  • 03TypeScript 소스 코드와 타입 정의의 공존으로 정교한 타입 추론 지원
  • 04'es-toolkit/compat' 패키지로 코드 수정 없이 즉시 마이그레이션 가능
  • 05Microsoft, IBM, Storybook 등 글로벌 기업들의 실제 도입 사례로 입증된 안정성

RECOMMENDATION

웹 성능 최적화와 Core Web Vitals 개선이 절실한 팀에게 es-toolkit 도입을 강력히 추천합니다. 특히 TypeScript 환경에서 개발 중이거나 lodash의 큰 번들 사이즈가 고민이라면, compat 패키지를 통해 단 5분 만에 드라마틱한 성능 향상을 경험해 보세요.

The Problem

기존의 lodash는 ES Modules(ESM)가 표준화되기 이전에 설계되어 내부 의존성이 복잡하게 얽혀 있었으며, 이로 인해 현대적인 트리 쉐이킹이 어렵고 번들 사이즈가 불필요하게 커지는 문제가 있었습니다. 또한 10년 전의 JavaScript 엔진 환경에 맞춰져 있어 최신 엔진(V8, SpiderMonkey 등)의 성능 최적화 이점을 온전히 활용하지 못했습니다.

The Solution

토스 프론트엔드 팀은 ESM과 TypeScript를 기반으로 모든 함수를 처음부터 다시 설계한 es-toolkit을 개발했습니다. 각 함수를 완전히 독립적으로 구현하여 내부 의존성을 제거함으로써 완벽한 트리 쉐이킹을 지원하며, 최신 JavaScript 엔진에서 가장 효율적으로 동작하는 코드 패턴을 채택했습니다.

The Result

lodash 대비 번들 사이즈를 최대 97% 줄였으며(5개 함수 기준 30KB에서 1KB로 감소), 실행 성능을 2~3배 향상시켰습니다. 출시 18개월 만에 npm 주간 다운로드 수 1,000만 건을 돌파하고 Microsoft, IBM, Storybook, Yarn 등 글로벌 기술 기업 및 프로젝트에 채택되는 성과를 거두었습니다.

Trade-off

본문에는 구체적인 부작용이 명시되지 않았으나, es-toolkit/compat을 통해 높은 호환성을 제공함에도 불구하고 수십 년간 축적된 lodash의 모든 세부 기능과 레거시 환경에서의 특수한 동작까지 100% 동일하게 구현하는 과정에서 미세한 동작 차이가 발생할 가능성은 잠재적으로 존재합니다.

03

Key Concepts

Concept · 01

ES Modules (ESM)

JavaScript의 공식 모듈 시스템으로, 정적 구조를 사용하여 빌드 타임에 의존성을 분석합니다.

  • es-toolkit은 초기 설계부터 ESM을 채택하여 효율적인 모듈 로딩을 보장함
  • lodash와 달리 정적 분석이 용이하여 사용하지 않는 코드를 빌드 과정에서 쉽게 제거할 수 있음
Concept · 02

Tree-shaking

최종 번들 파일에서 실제로 사용되지 않는 코드를 제거하여 파일 크기를 최적화하는 기술입니다.

  • es-toolkit의 각 함수는 독립적으로 설계되어 트리 쉐이킹 시 불필요한 내부 헬퍼 함수가 포함되지 않음
  • lodash-es보다 훨씬 정교하게 동작하여 번들 사이즈를 최대 97%까지 절감함
Concept · 03

TypeScript Co-location

소스 코드와 타입 정의 파일을 동일한 위치에 관리하여 일관성을 유지하는 전략입니다.

  • 별도의 @types 패키지 없이 타입 정의가 내장되어 버전 불일치 문제를 해결함
  • 개발자에게 정확하고 최신 상태의 타입 정보를 즉시 제공함