피드로 돌아가기
GeekNewsFrontend
원문 읽기
lodash를 아직 쓰고 있다면 - package.json 한 줄로 번들 97% 줄이기 (es-toolkit)
es-toolkit 도입으로 lodash 번들 사이즈 최대 97% 감소 달성함
AI 요약
Context
lodash가 10년 전 설계 이후 ES Modules, Tree Shaking, V8 엔진 최적화, TypeScript 등 환경이 크게 달라졌는데 구조는 그대로임. 이로 인해 불필요한 코드가 번들에 포함되는 문제가 발생함.
Technical Solution
- es-toolkit: 처음부터 ESM 기반으로 새로 설계함
- Tree Shaking 지원: 사용하지 않는 함수가 번들에 포함되지 않도록 함
- Runtime Performance 최적화: V8 엔진에 최적화된 구현으로 2~3배 성능 향상 달성함
- es-toolkit/compat: lodash 100% 호환 API 제공하여 드롭인 교체 가능함
- package.json 의존성 리다이렉션: "lodash": "npm:es-toolkit@^1.44.0" 한 줄 변경만으로 migration 가능함
Impact
groupBy, keyBy, pick, omit, debounce 5개 함수 기준 lodash-es ~30KB에서 es-toolkit ~1KB로 감소함. npm 주간 다운로드 1,000만 건 돌파함. Microsoft, Yarn, Storybook, IBM, Recharts, Dify 등 주요 프로젝트에서 자발적 채택함.
Key Takeaway
레거시 라이브러리라도 현대 개발 환경 변화에 맞춘 재설계가 가능함. ESM 기반 설계와 Tree Shaking 지원을 통해 번들 최적화의 핵심인 코드 제거가 자동으로 이루어짐.
실천 포인트
기존 lodash 사용 프로젝트에서 package.json의 "lodash" 의존성을 "npm:es-toolkit@^1.44.0"으로 교체하면 코드 수정 없이 번들 사이즈를 크게 줄일 수 있음.