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

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

NPMパッケージがプロジェクトに追加する膨張量を決定するにはどうすればよいですか？

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

バンドルに入った後、パッケージの最小+ gzip圧縮サイズを通知する小さなユーティリティがあります-

https://bundlephobia.com

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

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

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

依存関係ツリー内のすべてのtarballを含む、指定されたnpmパッケージのtarballサイズを検査するツールnpm download sizeを作成しました。これにより、依存関係を事前に追加するコスト（インストール時間、ディスク容量、ランタイムリソース、セキュリティ監査など）がわかります。

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

CLIツールはも可能です。次のようにインストールできます。

npm i -g download-size

次のように使用します。

$ download-size request
request@2.83.0: 1.08 MiB

ソースコードはGithubで入手できます：api、cliツール、およびwebクライアント。

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

https://packagephobia.com

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

このツールと他の同様のツールの詳細については、https：//github.com/styfle/packagephobiaの readmeを参照してください。

アップデート2020

「Unpacked Size」（基本的には「Publish Size」）は、「Total Files」とともにnpmjs.com Webサイトで入手できます。ただし、これは再帰的な意味ではなくnpm install、単一のパッケージが多くのパッケージに依存している可能性があるため、はるかに大きくなる可能性があります（したがって、パッケージ恐怖症は依然として関連しています）。

CLIからこの情報を出力する機能の保留中のRFCもあります。

モジュールバンドルとしてwebpackを使用している場合は、以下を参照してください。

• webpack-bundle-analyzer
• webpack-bundle-size-analyzer

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

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

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

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

howfatは、パッケージの合計サイズを表示できるもう1つのツールです。

npx howfat jasmine