why - storybook이 toss 팀의 오픈소스인 es-toolkit을 도입했다

LinkedIn에서 제목 그대로 storybook 팀이 lodash 대신 toss 팀의 오픈소스인 es-toolkit을 도입했다라는 문동욱님의 글을 보게 되었다.

storybook에 es-toolkit을 도입하게 된 설명은 다음과 같았다.

lodash is hard to tree-shake, it's CJS, and we want to move to less heavy, ESM dependencies.

This replaces lodash for es-toolkit which is mostly a drop-in replacement ♥️

I've only changed the core for now.

왜?

눈에 들어온 키워드는 tree-shake, CJS, ESM

1. tree-shake는 빌드 과정에서 사용하지 않는 모듈을 포함시키지 않는 것이라고 알고 있는데, 왜 lodash는 tree-shake가 어려운 걸까?

2. CJS와 ESM의 어떤 부분이 다르기 때문에 tree-shake에 영향을 주는 걸까?

Lodash가 tree-shake가 어려운 이유는 CommonJS(CJS)와 ES Modules(ESM)의 차이와 관련되어 있음

CJS (CommonJS):

• 노드 환경에서 주로 사용되며, module.exports와 require()로 모듈을 불러온다.
• 런타임에서 모듈을 불러오는 동적 구조이기에 빌드 도구 입장에서 어떤 코드가 사용되는지 분석하기 어렵다.
  따라서, tree-shaking이 잘 동작하지 않는다.

ESM (ES Modules):

• 브라우저와 모던 자바스크립트 환경에서 사용되며, import와 export로 정적 구조를 가진다.
• 정적 구조라서 빌드 타임에 어떤 모듈을 사용하는지 명확하게 분석할 수 있다.
  빌드 도구가 사용되지 않는 코드를 안전하게 제거(tree-shake)할 수 있다.

결론

• Lodash는 주로 CJS로 작성되었음

• CJS(CommonJS)는 런타임에서 모듈을 불러오는 "동적 구조"이기에 tree-shake가 어려움

• ESM(ES Modules)는 "정적 구조"이기에, 어떤 모듈을 사용하는 지 명확히 분석할 수 있어 사용하지 않는 코드를 제거(tree-shake)할 수 있음