번들 사이즈 경량화를 위한 시도들

1. lodash tree shaking

lodash는 commonJS문법으로 작성된 라이브러리라서, 일반적으로 destructiring하는 방법으로는 tree shaking 되지 않는다.

import { debounce } from 'lodash' => tree shaking 되지않음

tree shaking으로 사용하려는 모듈만 가져오기 위해서는 아래 두가지 방법을 취할 수 있다.

• import debounce from 'lodash/debounce'

  개별 module에 직접 접근해서 default import 하는 방법.

• import { debounce } from 'lodash-es'

  es 문법으로 작성된 버전의 lodash-es 라이브러리를 사용하는방법.

나는 lodash-es를 사용하는 방식을 선택했는데, 더 적은양의 코드를 사용하면서, import cost도 적기때문이다.

default import 방식은 tree shaking을 지원하지않는 node 환경에서 사용하면 될 듯하다.

import cost

• 
• 
• 

VsCode의 Import Cost 익스텐션으로 측정.

결과

lodash -> lodash-es : 22.08kB 경량화

🤔 그런데 lodash 는 esm, cjs 버전을 이렇게 따로 제공했어야만 하는걸까?

아니다.

{
  "name": "cjs-package",
  "exports": {
    ".": {
      "require": "./dist/index.cjs",
      "import": "./esm/index.mjs"
    }
  }
}

위와 같은 방식으로 package.json을 작성하면, 같은 path에 접근하더라도 조건에 따라 esm, cjs 두 버전의 코드를 따로 제공할 수 있다.

토스에서도 이런방식으로 범용성있는 라이브러리를 만든다고 한다 - https://github.com/toss/slash/blob/main/packages/common/hangul/package.json

2. code-splitting