bundlephobia.com 소개 및 사용 방법 - npm package cost 확인 및 비교 사이트

bundlephobia.com 소개 및 사용 방법 - npm package cost 확인 및 비교 사이트

 

npm을 사용하여 프로젝트를 진행하면서 많은 패키지들 사용하게 되는데요.

사용하려고 하는 패키지의 사이즈는 어떻게 되는지, 그와 유사한 패키지들은 어떤 것이 있고 그 패키지들에 대한 비용은 어떻게 되는지를 판단하는 것이 굉장히 중요합니다.

이를 쉽게 파악할 수 있는 사이트인 bundlephobia.com 를 소개 해드리려고 합니다.

Bundlephobia | Size of NPM dependencies

 

심플한 디자인의 홈페이지에서 원하는 패키지를 검색할 수 있습니다.

 

많은 패키지 중 date-fns 를 검색해 보겠습니다.

Bundle Size, 3G와 4G에서의 Download 시간을 보여주고,

버전별로 사이즈도 한눈에 확인할 수 있습니다.

 

패키지의 구성을 확인할 수 있습니다. date-fns 같은 경우 self 100%로 나오지만,

어떤 패키지는 다른 패키지들이 구성에 포함되어있는 경우도 있습니다.

 

패키지에서 따로 import할 수 있는 각 메소드들에 대한 사이즈도 상세하게 확인할 수 있습니다.

 

비슷한 패키지들도 보여주고 있습니다.

현재 검색한 패키지와의 크기 차이도 바로 확인할 수 있고,

해당 패키지를 클릭해 더 상세히 분석할 수도 있습니다.

 

 

프로젝트의 package.json 파일을 업로드하여 사용중인 패키지를 한눈에 보고 분석할 수 있는 서비스도 있습니다.

홈페이지에서 [Scan a package.json file] 을 클릭하여 이동할 수 있습니다.

 

여기에 프로젝트의 package.json 파일을 업로드 하면 됩니다.

 

React 프로젝트를 하나 생성하고, 위에서 검색해봤던 date-fns 패키지만 설치 후 package.json 파일을 업로드 해보겠습니다.

 

package.json 파일을 업로드 하니 위와같이 프로젝트에 포함된 패키지들이 나타납니다.

스캔할 패키지를 선택하여 스캔 해보겠습니다.

 

위와 같이 프로젝트에 포함된 패키지들의 용량과 다운로드 시간을 한눈에 확인할 수 있습니다.

각 패키지명을 클릭하여 패키지에대한 상세 분석 페이지로 넘어갈 수도 있습니다.

 

라이브러리, 패키지를 사용하는데 있어서 많은 도움이 될 사이트라고 생각됩니다.

 

 

이상으로 bundlephobia.com 소개 및 사용 방법에 대한 설명을 마치도록 하겠습니다.

 

 

도움이 되셨다면 공감, 댓글 부탁드립니다!

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

피드백도 언제나 환영입니다!

 

감사합니다.