Lodash tree shaking issue

use lodash-es

webpack은 번들링을 하면서 사용하지 않는 코드를 제거하는 tree shaking을 지원합니다.

다만 import되는 코드와 export 하는 코드 모두 ES Module로 작성되어 있어야만 tree shaking이 가능합니다.

*또한 babel에 의해서 CommonJS로 트랜스파일링되는 경우에도 불가능합니다.

.babelrc에서 "module": false 로 해결할 수 있습니다.

{
  "presets": [ 
    [
      "@babel/preset-env",
      {
        "module": false
      }
    ]
 ]

Tree Shaking | webpack

lodash의 경우 CommonJS로 작성되어 있기 때문에 import {} 를 사용해도 treeshaking이 되지 않아 사용하지 않는 나머지 lodash 메서드들도 전부 번들링합니다.

따라서,

import { isEmpty } from "lodash/isEmpty";

의 방식으로 import하거나 ES Module로 작성되어 있는 lodash-es를 사용하여 해결할 수 있습니다.

자, 그럼 tree shaking이 제대로 되는 지 확인 해 봅시다.

정확한 측정을 위해서 create-react-app으로 새로운 프로젝트를 만들고 lodash와 lodash-es만을 설치하여 측정해 보았습니다.

cloneDeep만을 사용하여 측정했습니다.

왼쪽부터 각각 설치 전 / lodash / lodash-es

webpack bundle analyzer라는 라이브러리를 이용해서도 측정 가능하지만 eject가 필요합니다.

webpack-bundle-analyzer

lodash vs lodash-es