아직도 lodash? 우리가 당장 es-toolkit을 써야 하는 이유

회사 동료분이 회사 프로젝트의 번들 사이즈를 최적화하는 작업을 진행하고 계시는데, lodash가 번들 사이즈가 커서 좀 신경이 쓰인다고 하시더라고요. 그래서 제가 es-toolkit으로 바꾸는 건 어떠냐고 제안을 드렸습니다.

예전에 es-toolkit에 커밋터로 몇 번 기여했던 적이 있어서 어떤 라이브러리인지는 알고 있었습니다. 기회가 되면 회사 프로젝트에도 꼭 써보고 싶다고도 늘 생각하고 있었는데, 이번에 마침 좋은 계기가 생겨서 동료분께 제안을 하게 되었죠. 다행히 동료분이 흔쾌히 해 보자는 말씀을 하셔서, 바로 es-toolkit으로의 마이그레이션을 진행하게 됐습니다.

es-toolkit이란?

es-toolkit은 토스에서 만든 lodash와 유사한 오픈소스 라이브러리입니다. 자바스크립트 개발 시에 자주 사용하는 다양한 유틸리티 함수들이 모여있죠. map, filter, debounce 등 실무에서 유용하게 활용할 수 있는 기능들을 제공합니다.

es-toolkit의 가장 큰 특징이자 장점은 설계가 최신 자바스크립트 모듈 시스템(ES Modules)에 최적화되어 있다는 점입니다. 즉, 트리 쉐이킹(Tree Shaking) 기능이 매우 효율적으로 동작한다는 의미죠.

트리 쉐이킹이란 실제 코드에서 사용되지 않는 부분을 최종 번들에서 제거하는 기술입니다. lodash의 경우에는 모듈 구조상 필요한 함수 하나만 가져오는 경우에도 불필요한 코드들이 포함되는 경우가 많았습니다.

반면 es-toolkit은 모듈 단위로 잘 분리되어 있어서 필요한 함수만 정확히 가져올 수 있고, 불필요한 나머지 코드는 효과적으로 제거됩니다. 이러한 특성에 힘입어 번들 사이즈를 획기적으로 줄일 수 있습니다. 빌드 시간도 이런 최적화의 영향으로 단축될 가능성이 높고요.

결론적으로, es-toolkit은 lodash와 거의 완전히 호환되면서도, 최신 자바스크립트 환경에 맞춰서 효율적으로 모듈을 설계할 수 있기 때문에 개발자들의 개발자경험(DX)는 물론이고 최종 사용자들에게도 역시 더 나은 성능 경험을 제공할 수 있습니다. 굉장히 매력적인 라이브러리라고 생각합니다.

그래서 결과는…?

마이그레이션 결과는 아래 이미지들에서 확인하실 수 있습니다.

우선 바로 아래 이미지를 보시면 lodash.js가 상당한 크기를 차지하고 있죠. 번들 사이즈가 547.05KB이나 되더라고요.

하지만…!

es-toolkit으로 마이그레이션 이후 번들 파일이 이렇게 바뀌었습니다.

이 아래 이미지를 보시면, 저기 작게 보이는 게 es-toolkit입니다. 번들 사이즈는 36.18KB고요. lodash에서 es-toolkit으로 라이브러리 하나를 바꿨을 뿐인데 번들 사이즈가 약 93% 줄어든거죠.

참고로 프로젝트 전체의 번들 사이즈는 약 100KB 정도 줄었고, 빌드 시간도 약 7.41% 빨라졌습니다. 🙌

마이그레이션이 효과가 있어서 다행히 팀원 분들도 기뻐해주셨고, 저도 참 뿌듯했습니다. 😊

보통 마이그레이션이나 성능 최적화라고 하면 공수가 많이 들고 노가다를 해야 하는 경우가 많아서 엄두를 내기 어렵습니다. 하지만 이번 마이그레이션은 시간대비 효과가 정말 좋은 마이그레이션이어서 좋네요. 만약 아직도 lodash를 쓰고 계신 분들이 있다면, es-toolkit으로 갈아타는 방안을 한 번 고려해보시는걸 권해드립니다!