Lodash tree shaking issue
Published in
4 min readAug 26, 2021
use lodash-es
webpack은 번들링을 하면서 사용하지 않는 코드를 제거하는 tree shaking을 지원합니다.
다만 import되는 코드와 export 하는 코드 모두 ES Module로 작성되어 있어야만 tree shaking이 가능합니다.
*또한 babel에 의해서 CommonJS로 트랜스파일링되는 경우에도 불가능합니다.
.babelrc에서 "module": false
로 해결할 수 있습니다.
{
"presets": [
[
"@babel/preset-env",
{
"module": false
}
]
]
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가 필요합니다.