公開されているnpmモジュールのサイズを縮小する

デフォルトでは、npmはレジストリ内のモジュール全体を公開します。 .gitignoreファイルで明示的に指定されている場合を除きます。 これにより、依存関係は破棄されますが、不要なファイルの束が公開されたファイルに漏れることがあります。 その後、 感謝しているユーザーは、これがすべてダウンロードされるまで待機します。 ちなみに、ところで、あなたは約6メガバイト待たなければなりません。 そして、彼は通常一人ではありません。



公開後にモジュールのサイズを測定し、可能であればこのサイズを小さくする方法を考え出すことにしました。 例として、いくつかのファイルのみを含むcheck-more-typesモジュールを使用します。 さらに、READMEマークダウンファイルに収集される単体テストとドキュメント。




まず、現在のモジュールサイズを計算する必要があります。 NPMはすべてのファイルをtarアーカイブとして保存するため、このようなアーカイブを作成してそのサイズを確認するだけで十分です。 さらに、npmにはこのための特別なnpm packコマンドがあり、指定されたディレクトリのコンテンツからアーカイブを作成します。 Mathias Bynensは、モジュールのサイズを決定する次のスクリプトを提供します。



tarball="$(npm pack .)"; wc -c "${tarball}"; tar tvf "${tarball}"; rm "${tarball}";
      
      







3ada360 ハッシュを使用して、コミットのアーカイブのサイズを測定しました。



いくつかのシェルマジック
 $ tarball="$(npm pack .)"; wc -c "${tarball}"; tar tvf "${tarball}"; rm "${tarball}"; 25184 check-more-types-2.1.2.tgz -rw-r--r-- 0 501 20 1977 Nov 19 13:55 package/package.json -rw-r--r-- 0 501 20 64 Nov 19 13:18 package/.npmignore -rw-r--r-- 0 501 20 19703 Nov 19 13:49 package/README.md -rw-r--r-- 0 501 20 1073 Nov 19 13:18 package/LICENSE -rw-r--r-- 0 501 20 2534 Nov 19 13:18 package/Gruntfile.js -rw-r--r-- 0 501 20 18204 Nov 19 13:18 package/check-more-types.js -rw-r--r-- 0 501 20 6723 Nov 19 13:49 package/check-more-types.min.js -rw-r--r-- 0 501 20 600 Nov 19 13:49 package/bower.json -rw-r--r-- 0 501 20 162 Nov 19 13:18 package/.travis.yml -rw-r--r-- 0 501 20 1756 Nov 19 13:18 package/.jshintrc -rw-r--r-- 0 501 20 655 Nov 19 13:18 package/docs/README.tmpl.md -rw-r--r-- 0 501 20 1936 Nov 19 13:18 package/docs/badges.md -rw-r--r-- 0 501 20 255 Nov 19 13:18 package/docs/footer.md -rw-r--r-- 0 501 20 240 Nov 19 13:18 package/docs/install.md -rw-r--r-- 0 501 20 13707 Nov 19 13:49 package/docs/use.md -rw-r--r-- 0 501 20 127 Nov 19 13:18 package/test/check-more-types-minified-spec.js -rw-r--r-- 0 501 20 78 Nov 19 13:18 package/test/check-more-types-spec.js -rw-r--r-- 0 501 20 467 Nov 19 13:18 package/test/load-under-node-test.js -rw-r--r-- 0 501 20 738 Nov 19 13:18 package/test/synthetic-browser-spec.js -rw-r--r-- 0 501 20 37754 Nov 19 13:18 package/test/unit-tests.js
      
      









何が見えますか? 多数のファイルと圧縮データのサイズは251184バイトです。 まず、このプロセスを少し自動化します。 シェルコマンドを使用せずにサイズを取得するための優れたユーティリティ、 Tim Oxleyが作成したpkgfilesを見つけました。



このユーティリティをdev依存関係としてインストールし、 package.jsonの 「prepublish」スクリプトに追加しました。



 { "devDependencies": { "pkgfiles": "2.3.0" }, "scripts": { "prepublish": "pkgfiles" } }
      
      







「Prepublish」スクリプトは、ローカルインストールおよびnpm publishコマンドを使用して毎回実行されます。 変更後のnpm run publishの結果を見てみましょう。



npm run prepublish result
 $ npm run prepublish > check-more-types@2.1.2 prepublish /Users/kensho/git/check-more-types > pkgfiles PATH SIZE % .npmignore 0 B 0% test/check-more-types-spec.js 78 B 0% test/check-more-types-minified-spec.js 127 B 0% .travis.yml 162 B 0% docs/install.md 240 B 0% docs/footer.md 255 B 0% test/load-under-node-test.js 467 B 0% bower.json 600 B 1% docs/README.tmpl.md 655 B 1% test/synthetic-browser-spec.js 738 B 1% LICENSE 1.07 kB 1% .jshintrc 1.76 kB 2% docs/badges.md 1.94 kB 2% package.json 2.05 kB 2% Gruntfile.js 2.53 kB 2% check-more-types.min.js 6.72 kB 6% docs/use.md 13.71 kB 13% check-more-types.js 18.2 kB 17% README.md 19.7 kB 18% test/unit-tests.js 37.75 kB 35% DIR SIZE % docs/ 16.79 kB 15% test/ 39.16 kB 36% . 108.77 kB 100% PKGFILES SUMMARY Size on Disk with Dependencies ~126.72 MB Size with Dependencies ~88.58 MB Publishable Size ~108.77 kB Number of Directories 3 Number of Files 20
      
      









非常に詳細な情報。 そして、最も「重い」ファイルが最後に表示されるため、ターミナルで結果を簡単に分析できます。 ドキュメントとテストを含むディレクトリは、ほとんどのスペースを占有します。これは、公開するつもりはないという事実にもかかわらずです。



npmに公開しないファイルを指定するには、3つの方法があります。 デフォルトの方法を使用します。.gitignoreで指定されたファイルは自動的にブラックリストに登録されます。 また、別のファイル.npmignoreを作成できます。このファイルでは、公開したくないgitに依存しない一連のファイルを指定します。 別の方法: package.jsonを使用してホワイトリストにファイルを追加します。 個人的には、この方法が好きです。 package.jsonREADMEなどの多くのファイルが自動的にホワイトリストに登録されることに注意してください。



 { "files": [ "bower.json", "check-more-types.js", "check-more-types.min.js" ] }
      
      







また、既に追加されているファイルを除外するには、感嘆符を使用できます。 たとえば、公開するsrcディレクトリに、公開したくないサブディレクトリテストがある場合、次のようになります。



 { "files": [ "src", "!src/test" ] }
      
      







まあ、同じsrcディレクトリに本番用とテスト/ステージング用の両方のファイルがある場合、一度に1つずつまたはグループでファイルを除外できます。



 { "files": [ "src/*.js", "!src/*-spec.js" ] }
      
      







これらのすべての変更を含むコミットハッシュは、 bc3e2a1始まります。 公開されたモジュールのサイズで何が起こったのか見てみましょう:



npm run prepublishの別の結果
 $ npm run prepublish > check-more-types@2.1.2 prepublish /Users/kensho/git/check-more-types > pkgfiles PATH SIZE % bower.json 600 B 1% LICENSE 1.07 kB 2% package.json 2.15 kB 4% check-more-types.min.js 6.72 kB 14% check-more-types.js 18.2 kB 38% README.md 19.7 kB 41% DIR SIZE % . 48.45 kB 100% PKGFILES SUMMARY Size on Disk with Dependencies ~126.72 MB Size with Dependencies ~88.58 MB Publishable Size ~48.45 kB Number of Directories 1 Number of Files 6
      
      









パブリッシュされたモジュールのサイズは107キロバイトから48に55%減少しました。これは一般的なサイズの減少ですが、tarアーカイブ内で正確に何が変更されたかはまだわかります。 残念ながら、 npm packprepublishスクリプトを呼び出し、その出力を正しく処理できません。 そのため、一時的にprepublishの名前を変更し、「tarball = ...」という名前を再利用という名前で追加します。



npmの実行サイズの結果
 $ npm run size > check-more-types@2.1.2 size /Users/kensho/git/check-more-types > tarball="$(npm pack .)"; wc -c "${tarball}"; tar tvf "${tarball}"; rm "${tarball}"; 13179 check-more-types-2.1.2.tgz -rw-r--r-- 0 501 20 2256 Nov 19 14:09 package/package.json -rw-r--r-- 0 501 20 19703 Nov 19 13:58 package/README.md -rw-r--r-- 0 501 20 1073 Nov 19 13:18 package/LICENSE -rw-r--r-- 0 501 20 18204 Nov 19 13:58 package/check-more-types.js -rw-r--r-- 0 501 20 6723 Nov 19 13:58 package/check-more-types.min.js -rw-r--r-- 0 501 20 600 Nov 19 13:58 package/bower.json
      
      









クライアントは28キロバイトではなく13キロバイトだけを言う必要があり、これはサイズが50%削減されます!



また、ローカルリポジトリから「リモートマスター」にプッシュするたびに、公開されたモジュールのサイズを表示するようになりました。 これを行うには、 size コマンドpkgfilesコマンドの両方を事前プッシュステップに追加し、「pre-git」モジュールを使用します。



 npm install -D pre-git
      
      





package.json
 { "scripts": { "pkgfiles": "pkgfiles", "size": "tarball=\"$(npm pack .)\"; wc -c \"${tarball}\"; tar tvf \"${tarball}\"; rm \"${tarball}\";" }, "config": { "pre-git": { "pre-push": [ "npm run size", "npm run pkgfiles" ] } } } </spoiler>
      
      







すべてが機能していることを確認するために、パッケージバージョンを2.1.2から2.2.0に増やし、クリーンディレクトリとnpmバージョン「3.4.0」のインストールに使用しました。



 $ time npm i check-more-types@2.1.2 /private/tmp/test-small └── check-more-types@2.1.2 real 0m2.706s user 0m1.419s sys 0m0.323s
      
      







ほぼ3秒。 node_modulesディレクトリを削除して、パッケージの新しいバージョンを試してください。



 $ rm -rf node_modules/ $ time npm i check-more-types@2.2.0 /private/tmp/test-small └── check-more-types@2.2.0 real 0m1.716s user 0m1.244s sys 0m0.198s
      
      







インストールから1秒で正常に終了しました-これは、小さなモジュールの合計インストール時間の30%です!



「クリーンアップ」に使用したpackage.jsonのフルバージョン( リポジトリで確認できます ):



 npm install -D pkgfiles pre-git
      
      





package.json全体
 { "devDependencies": { "pkgfiles": "2.3.0", "pre-git": "1.3.0" }, "scripts": { "pkgfiles": "pkgfiles", "size": "tarball=\"$(npm pack .)\"; wc -c \"${tarball}\"; tar tvf \"${tarball}\"; rm \"${tarball}\";" }, "config": { "pre-git": { "pre-push": [ "npm run size", "npm run pkgfiles" ] } } }
      
      









ところで、「tarball」の代わりに「t」を使用すると、このバージョンをわずかに減らすことができます。



 "scripts": { "pkgfiles": "pkgfiles", "size": "t=\"$(npm pack .)\"; wc -c \"${t}\"; tar tvf \"${t}\"; rm \"${t}\";" }
      
      






All Articles