es-toolkit

1 개의 포스트

97% Smaller, 2x Faster: How es-toolkit Reached 10 Million Weekly Downloads (새 탭에서 열림)

es-toolkit은 lodash를 대체하기 위해 토스(Toss)에서 처음부터 다시 설계한 현대적인 JavaScript 유틸리티 라이브러리입니다. 최신 웹 표준인 ES Modules와 TypeScript를 기반으로 제작되어 lodash 대비 번들 크기는 최대 97% 줄이고 실행 속도는 2배 이상 높였습니다. 현재 마이크로소프트, IBM 등 글로벌 기업들이 도입하며 주간 1,000만 회 이상의 다운로드를 기록하는 등 차세대 표준 유틸리티로 자리 잡고 있습니다. ### lodash의 한계와 탄생 배경 * **구식 아키텍처:** lodash는 10년 전 JavaScript 환경에 맞춰 설계되어, 최신 웹의 표준인 ES Modules 기반의 트리 셰이킹(Tree-shaking)을 완벽히 활용하지 못합니다. * **불필요한 의존성:** lodash는 단일 함수를 임포트하더라도 내부적인 헬퍼 함수들이 함께 포함되어 번들 크기가 커지는 구조적 한계를 가집니다. * **현대적 엔진 최적화 미비:** V8이나 SpiderMonkey와 같은 현대적 엔진은 과거에 느렸던 패턴들을 최적화했지만, lodash는 하위 호환성 문제로 이러한 최신 성능 이점을 충분히 누리지 못합니다. ### 독보적인 번들 사이즈와 실행 성능 * **완전한 독립성:** 모든 함수가 처음부터 독립적으로 설계되어 숨겨진 내부 의존성이 없습니다. 예를 들어 주요 함수 5개를 사용할 때 lodash는 약 30KB를 차지하지만, es-toolkit은 1KB에 불과합니다. * **런타임 최적화:** 현대 JavaScript 엔진에 최적화된 패턴을 적용하여 대부분의 함수가 2배 이상 빠르며, 특정 함수(`omit`)의 경우 11배 이상의 성능 향상을 보여줍니다. * **실질적 절감 효과:** `sample` 함수의 경우 lodash 대비 번들 크기를 96%까지 줄이는 등, 실제 프로젝트의 Core Web Vitals 지표 개선에 직접적인 도움을 줍니다. ### TypeScript 우선 설계 및 호환성 * **정밀한 타입 추론:** 별도의 `@types` 패키지 없이 소스 코드와 타입 정의가 함께 제공되어 타입 정확도가 매우 높고, 복잡한 타입도 정확히 추론합니다. * **드롭인 교체 지원:** `es-toolkit/compat` 레이어를 통해 lodash와 100% 호환성을 보장합니다. 이는 Storybook, Recharts 등 대규모 오픈소스 프로젝트의 성공적인 마이그레이션으로 검증되었습니다. * **활발한 생태계:** 토스 프런트엔드 챕터의 오픈소스 위원회가 주도하며, `overlay-kit`, `use-funnel` 등과 함께 지속적으로 관리되고 업데이트됩니다. ### 손쉬운 마이그레이션 방법 * **단축 경로:** `package.json`의 의존성 설정에서 `lodash`를 `npm:es-toolkit`으로 별칭(alias) 지정하는 것만으로 코드 수정 없이 즉시 성능 이점을 얻을 수 있습니다. * **점진적 전환:** 단순한 임포트 경로 변경만으로도 도입이 가능하며, 대규모 코드베이스를 위해 공식 codemod 도구(`@es-toolkit/codemod`)를 제공하여 전환 비용을 최소화합니다. 번들 크기 최적화와 런타임 성능이 중요한 현대 프런트엔드 환경에서 lodash를 유지할 이유는 점차 사라지고 있습니다. 단 5분의 투자로 `package.json` 설정을 변경하여 즉각적인 성능 향상을 경험해 보길 권장하며, 특히 TypeScript를 활발히 사용하는 프로젝트라면 타입 안전성 측면에서도 es-toolkit은 최선의 선택이 될 것입니다.