[NPM] Bundlephbia

 

모듈을 선택할 때 꼭 확인해야 할 사이트가 있습니다.

 

번들 포비아(https://bundlephobia.com/)라는 사이트인데요. 내가 설치 하고 싶은 패키지를 검색해 보면 검색한 패키지와 유사한 패키지를 화면 제일 하단에 추천을 해줍니다. 그리고 용량을 함께 보여주니 각 패키지의 번들링 사이즈를 확인하면서 설치할 수 있습니다. 

비슷한 패키지

 

물론 용량뿐만이 아니고 얼마나 업데이트가 자주 일어나는지, 다운로드 수는 어떤지도 체크해야하겠지만 성능 튜닝하다 보면 패키지의 사이즈가 신경 쓰이게 됩니다.

 

예를 들어 몇년전에 날짜 계산 라이브러리로 Moment를 사용했었는데 바꾼 기억이 있어서 비교해 보겠습니다.

 

| Moment

홈페이지 : https://momentjs.com/ 

Moment 패키지의 용량

 

| Dayjs

홈페이지 : https://day.js.org/

Dayjs의 용량

 

| 요약

dayjs는 96%가 유사하지만 번들 사이즈는 수십 배 가까이 차이 납니다. 

기능은 써보면 거의 동일합니다. 

번외로 우리가 프로젝트를 빌드할 때 각 패키지 사이즈를 직관적으로 보여주는 플러그인이 있습니다. 

webpack-bundle-analyzer를 추가하시면 아래와 같이 볼 수 있습니다.

홈페이지 : https://www.npmjs.com/package/webpack-bundle-analyzer