간단 정리

날짜를 선택하는 라이브러리는 여럿 존재하며 그중 어떤걸 쓸지 간단히 알아보았다.
처음에는 라이브러리의 https://bundlephobia.com/ 사이트를 이용하여 트리셰이킹이 되는 라이브러리만 모았으며, Gzipped size만 따졌었다. 하지만 cra-bundle-analyzer를 사용해보니 실제로 클라이언트로 보내는 용량을 알 수 있었고, 라이브러리에 따라서는 node mouldes가 아니라 src에 들어있거나 자신보다 용량이 더 큰 별개의 라이브러리를 부르는 일이 있었다.

실제로 cra-bundle-analyzer 써보기

cra-bundle-analyzer npm 페이지

설치 방법

# NPM
npm install --save-dev cra-bundle-analyzer
# Yarn
yarn add -D cra-bundle-analyzer

실행 방법

npx cra-bundle-analyzer

용량 확인하기

터미널에 실행 명령어를 입력하면 위와같은 화면이 브라우저에 뜬다

왼쪽위의 "<" 버튼을 누르고 "Stat"으로 들어가자
이제 검색창에 원하는 라이브러리의 이름을 치면 해당 라이브러리가 얼마나 용량을 차지하는지 알 수 있다

위의 스크린샷만 보면 Antd는 용량을 3.59 kB밖에 안먹는 엄청 가벼운 라이브러리일것같다

그런데 검색창 위의 Show content of concatented modules를 눌러서 src내의 연결된 모듈을 보게 된다면 이야기가 달라진다. 웹팩은 최적화 과정에서 여러 모듈을 하나의 클로저로 연결해서 번들 크기를 줄이고 실행 속도를 향상 시키기 때문에 이런일이 일어난다.

트리셰이킹 확인

라이브러리에서 가져온 모듈의 수에 따라서 용량이 달라진다면 트리셰이킹이 된다고 볼 수 있다

rsuite 라이브러리에서 DatePicker만 가져올 경우와 DateRangePicker까지 가져올 경우에 node_modules에서의 용량은 30.95kB로 똑같지만 src안에서의 용량은 529.84에서 587.49로 늘어났다. 즉, 트리셰이킹이 일어나고 있다

한계점

아쉽게도 이 방법은 정적인 분석 방법이기 때문에 내가 사용하는 라이브러리의 대략적인 용량 사이즈,모듈 구조에 대해 알아내는 것에는 도움이 된다. 하지만 런타임에 결정되는 동적 임포트를 알기는 힘들다