[JS] Lodash Import 용량 줄이기 팁

Lodash 모듈을 import할 때 import { cloneDeep } from 'lodash' 이렇게 작성 하면 풀버전 모듈을 가져온다. 몇몇 함수를 사용하기 위해 불필요한 import를 하는 셈이 된다. 참고로 Lodash는 웹팩의 프로덕션 빌드로 번들링하면 25kb 정도 차지한다고 한다. 30kb 정도의 React DOM, Vue.js와 비교해도 꽤 무거운편이다.

import { cloneDeep } from 'lodash' // 73.15 kB (gzip: 25.42 kB)

 

import 구문을 아래처럼 작성하면 필요한 함수만 불러올 수 있다. 하지만 여러 Lodash 함수를 연속적으로 사용하는 chaining 할 수 없는 단점이 있다. 따라서 아래 방법은 단일 함수를 사용할 때 적합하다.

import cloneDeep from 'lodash/cloneDeep'; // 17.84 kB (gzip: 4.91 kB)

 

chaining 기능이 필요하다면 Lodash core 빌드를 사용하면 된다. Lodash의 가장 기본적인 63가지 함수들만 모아놓은 버전이다. 용량은 4kb 정도 밖에 안된다. 기본 함수 외에 다른 함수가 필요하면 mixin 방식으로 추가할 수도 있다. 더 자세한 내용은 링크 참고.

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요