npm 패키지의 크기를 보려면 어떻게합니까?

NPM에서 패키지를 검색 할 때 패키지 크기 (KB 또는 MB 등)를보고 싶습니다. NPM은이 정보를 보여주지 않는 것 같습니다.

NPM 패키지가 프로젝트에 얼마나 많은 부풀림을 추가 할 수 있는지 어떻게 알 수 있습니까?

측정하고자하는 것은 패키지를 앱 번들에 추가 할 경우 패키지에 미치는 영향입니다. 다른 답변의 대부분은 소스 파일의 크기 만 추정하며 인라인 주석, 긴 var 이름 등으로 인해 정확하지 않을 수 있습니다.

패키지에 들어간 후 패키지의 최소 + gzipped 크기를 알려주는 작은 유틸리티 가 있습니다.

https://bundlephobia.com

이 모듈 비용 프로젝트를 살펴보십시오 . 패키지의 크기와 자식 수를 나열하는 npm 패키지입니다.

설치: npm install -g cost-of-modules

사용법 : cost-of-modules작업중인 디렉토리에서 실행하십시오 .

의존성 트리의 모든 tarball을 포함하여 주어진 npm 패키지의 tarball 크기를 검사하는 npm download size 도구를 만들었습니다 . 이를 통해 종속성을 추가하는 비용 (설치 시간, 디스크 공간, 런타임 리소스, 보안 감사 등)에 대한 아이디어를 얻을 수 있습니다.

위 이미지에서 Tarball 크기 는 패키지의 tar.gz이고 총 크기 는 모든 tarball의 크기입니다. 이 도구는 매우 기본적이지만 도구의 기능을 수행합니다.

CLI 도구 도 사용할 수 있습니다. 다음과 같이 설치할 수 있습니다.

npm i -g download-size

그리고 이것을 다음과 같이 사용하십시오 :

$ download-size request
request@2.83.0: 1.08 MiB

소스 코드는 Github에서 사용할 수 있습니다 : api , cli tool 및 web client .

나는 패키지 크기 정보를 npmjs.com으로 가져오고 시간이 지남에 따라 패키지 팽창을 추적하기 위해 올해 초 패키지 포비아를 만들었습니다.

https://packagephobia.com

이것은 npm install서버 측 종속성 express또는 개발자 종속성과 같은 실행 후 디스크 공간을 측정하도록 설계되었습니다 jest.

https://github.com/styfle/packagephobia 의 readme에서이 도구 및 기타 유사한 도구에 대한 자세한 내용을 확인할 수 있습니다.

2020 업데이트

"포장되지 않은 크기"(기본적으로 게시 크기)는 npmjs.com 웹 사이트에서 "전체 파일"과 함께 사용할 수 있습니다. 그러나 이것은 npm install단일 패키지가 많은 패키지에 의존 할 가능성이 높 으므로 재귀적인 의미는 아닙니다 (따라서 패키지 공포증은 여전히 ​​관련이 있습니다).

CLI에서이 정보를 인쇄하는 기능에 대해 보류중인 RFC 도 있습니다 .

웹 번들을 모듈 번 들러로 사용하는 경우 :

• 웹팩 번들 분석기
• 웹팩 번들 크기 분석기

나는 첫 번째 옵션을 추천합니다. 대화식 트리 맵에 크기가 표시됩니다. 번들 파일에서 패키지 크기를 찾는 데 도움이됩니다.

이 게시물의 다른 답변은 프로젝트의 크기를 보여 주지만 나무 흔들림과 같이 프로젝트의 모든 부분을 사용하지 않을 수도 있습니다. 다른 접근 방식은 정확한 크기를 표시하지 않을 수 있습니다.

package-size 사용하십시오 .

npx package-size vue,vue-router,vuex react,react-dom,react-router,redux

https://github.com/egoist/package-size

Visual Studio Code를 사용하는 경우 Import Cost 라는 확장을 사용할 수 있습니다 .

이 확장은 편집기에서 가져온 패키지의 크기를 인라인으로 표시합니다. 확장 프로그램은 가져온 크기를 감지하기 위해 babili-webpack-plugin과 함께 webpack을 사용합니다.

npm-module-stats를 확인할 수 있습니다 . npm 모듈은 모듈을 설치하거나 다운로드하지 않고도 npm 모듈의 크기와 해당 종속성을 가져옵니다.

용법:

var stats = require("npm-module-stats");

stats.getStats("glob").then((stack) => {

  let dependencies = Object.keys(stack);
  let totalSize = dependencies.reduce((result, key, index) => {
    return result + stack[key].size;
  }, 0);

  console.log('Total Size in Bytes ', totalSize);
  console.log('Total Dependencies ', dependencies.length-1);

}).catch((err) => {
  console.error(err);
});

조금 장황하게 보일 수 있지만 적절하게 설명한 문제를 해결합니다.

"빠르고 더러운"방법은 curl 및 wzrd.in 을 사용 하여 축소 된 패키지를 빠르게 다운로드 한 다음 파일 크기를 grep하는 것입니다.

curl -i https://wzrd.in/standalone/axios@latest | grep Content-Length

다운로드는 축소되었지만 압축되지는 않았지만 둘 이상의 패키지를 비교할 때 패키지의 상대적 크기에 대한 좋은 아이디어를 얻습니다.

howfat 는 전체 패키지 크기를 표시 할 수있는 하나 이상의 도구입니다.

npx howfat jasmine