Lodash 사이즈 줄이기
“바퀴를 다시 발명 하지 말라” 라는 말이 있습니다.
이미 알려진 알고리즘이나 자주 쓰이는 함수들을 코드를 다시 작성 하거나 할 필요가 없다는 뜻인데요,
이 말에 가장 적합한 라이브러리가 Lodash가 아닐까 생각합니다.
import _ from 'lodash'
Lodash 모듈을 임포트 하게 되면, 풀버전의 모듈이 임포트가 됩니다.
웹팩에서 프로덕션 빌드로 번들링 할 경우 크기는 대략 25KB 정도 되는데요,
33KB 크기의 Vue.js, 37KB 크기의 React DOM 이랑 비교하면 작기는 하지만, 단순히 몇몇 함수들을 쓰기 위해서 임포트 하기에는 다소 크다고 느껴질 수 있는데요, 스크립트 로딩 속도 개선이 필요하여 고민을 하다보면, 번들 사이즈에서 10KB라도 줄일 수 있으면 감지덕지일 경우엔 더욱 크게 느껴질 수 있는 크기입니다.
필자는 Lodash를 몇년째 모든 프로젝트에 표준 라이브러리처럼 생각하고 기본적으로 탑재 하고 사용하고 있는데요,
많이 쓰이는 기능들을 모아 놓긴 하였지만, 많이 쓰인다고 해서 한가지 프로젝트에서 모든 기능들이 쓰이는건 아니죠, 일부만 쓰이는 경우가 대부분일 것입니다.
우리는 안 쓰는 기능은 빼고 필요한 기능만 임포트 하여 용량을 줄이는 방법을 생각 해 볼 수 있습니다.
가장 쉬운 방법은 모듈 내에 필요한 함수들만 임포트 하여 사용하는 방법입니다.
import merge from 'lodash/merge'
import groupBy from 'lodash/groupBy'...
merge(a, b)
...
groupBy(arr, 'id')
...
이렇게 하면 모든 기능이 아닌 해당 함수에 관련한 기능들만 추가되기 때문에 적은 사이즈만 사용하게 됩니다.
하지만 이렇게 하면, Lodash의 큰 장점중 하나인 chaining을 사용하지 못하게 됩니다. 다른 글들을 보다 보면, 체이닝을 쓰면 안된다 또는 waterfall 방식을 써서 체이닝을 대체해라 등등의 의견이 있지만, 결국 Lodash의 큰 장점을 포기하는것은 동일합니다.
로또 번호를 랜덤하게 생성하는 코드인데요, 위와 같이 한 줄로 체이닝이 되었을때 자연어로 바꿔도 자연스러워서 좋은 경우가 많이 있고, 체이닝 도중 값에 대한 예외 처리도 해주기 때문에 체이닝을 포기하지 않는 방법을 제시하려고 합니다.
Lodash core 빌드는 4KB의 작은 사이즈이며 체이닝을 기본 지원합니다. 가장 기본적인 63가지 함수들만 지원합니다. 코어 빌드를 쓰게 되면 기본적으로 풀 빌드에 비해 21KB 크기가 줄어들게 됩니다. 여기에 필요한 함수들만 추가해서 쓰는 방법에 대해서 설명하겠습니다.
코어빌드에 포함된 메소드 목록은 여기서 보실 수 있습니다. https://github.com/lodash/lodash/wiki/Build-Differences
프로젝트 루트에 lodash.js 파일 생성 후 필요 기능들 임포트
현 프로젝트에서 필요하다 싶은 기능들만 임포트 하여 mixin으로 _ 내에 믹스인하여 체이닝이 가능하게 합니다.
웹팩 alias에 프로젝트 루트에 대한 별칭 생성
임포트문 변경하여 사용
임포트를 import _ from 'lodash' 를 위에서 지정한 별칭을 적용하여 import _ from '~/lodash' 로 변경하여 사용합니다. import form '@lodash' 같은 별칭도 좋습니다.
이렇게 사용 할 경우, 프로젝트에 따라 다르지만, 풀버전(25KB)보다 최소 10KB 이상 더 작아진 사이즈로 사용 할 수 있습니다.
