web-dev-qa-db-ja.com

npmパッケージのサイズを表示するにはどうすればよいですか？

NPMでパッケージを検索するときに、パッケージサイズ（KBまたはMBなど）を確認したいのですが。 NPMはこの情報を表示していないようです。

NPMパッケージがプロジェクトに追加する大きさを判断するにはどうすればよいですか？

npmpackagesize
90
arielorvits

おそらく測定したいのは、パッケージをアプリバンドルに追加した場合にパッケージが持つ影響です。他の回答のほとんどは、ソースファイルのサイズのみを推定します。これは、インラインコメント、長い変数名などのために不正確になる可能性があります。

パッケージの最小値+ gzip圧縮されたサイズafterを教えてくれる小さなユーティリティがあります-

https://bundlephobia.com

113
Shubham Kanodia

これを見てください モジュールのコスト プロジェクト。パッケージのサイズと子の数をリストするnpmパッケージです。

インストール：npm install -g cost-of-modules

使用法：作業中のディレクトリでcost-of-modulesを実行します。

enter image description here

59
Liron Yahdav

npm download size というツールを作成しました。これは、依存関係ツリー内のすべてのtarballを含む、特定のnpmパッケージのtarballサイズを検査します。

download size of webpack

上の画像では、Tarball sizeはパッケージのtar.gzであり、Total sizeはすべてのtarballのサイズです。このツールは非常に基本的なものですが、それは言うことを行います。

cliツール も使用できます。次のようにインストールできます。

npm i -g download-size

そして、次のように使用します。

$ download-size request
[email protected]: 1.08 MiB

ここに asciinema demo があります。

ソースコードはGithubで入手できます： api 、 cli tool および web client 。

16
arve0

パッケージサイズ情報をnpmjs.comに取り込み、パッケージの膨張を長期的に追跡することを期待して、今年初めにPackage Phobiaを作成しました。

https://packagephobia.now.sh

img

これは、expressのようなサーバー側の依存関係またはjestのようなdev依存関係に対してnpm installを実行した後、ディスク容量を測定するように設計されています。

このツールやその他の同様のツールの詳細については、こちらのreadmeをご覧ください： https://github.com/styfle/packagephobia

注：Webサイトを変更するnpmチームの動きはありませんが、彼らはインストールされたサイズをcliに追加することを検討しています。詳細については、 RFC 1 を参照してください。

10
styfle

モジュールバンドラーとしてwebpackを使用している場合：

私は間違いなく最初のオプションをお勧めします。インタラクティブツリーマップでサイズを示します。これは、バンドルファイルでパッケージのサイズを見つけるのに役立ちます。

Webpack Bundle Analyzer

この投稿の他の回答は、プロジェクトのサイズを示していますが、プロジェクトのすべての部分を使用しているわけではないかもしれません。たとえば、木を揺らすなどです。他のアプローチでは、正確なサイズが表示されない場合があります。

10
Black

package-sizeを使用してみてください。

yarn global add package-size

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

4
c01nd01r

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);
});

少し冗長に見えるかもしれませんが、適切に記述した問題を解決します。

2
bkk

Visual Studio Codeを使用する場合、 Import Cost という拡張子を使用できます。

この拡張機能は、インポートされたパッケージのサイズをエディターにインラインで表示します。拡張機能は、インポートされたサイズを検出するために、webbiliとbabili-webpack-pluginを使用します。

2
kyw

「クイック＆ダーティ」な方法は、curlと wzrd.in を使用して、縮小されたパッケージをすばやくダウンロードし、ファイルサイズをgrepすることです。

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

ダウンロードは縮小されますが、gzip圧縮されませんが、2つ以上のパッケージを比較すると、パッケージの相対的なサイズがわかります。

2
thoragio