【npmライブラリ作成】パッケージサイズ(package size, unpacked size)を減らす2つの方法

OSS

自分でnpmライブラリを作ったのですが、そのパッケージサイズが大きく、減らす方法を模索しました。
npmサイトでは、各ライブラリのページにUnpacked Sizeが表示されますし、
ユーザーがライブラリを選択するときの基準にもなるので、できるだけパッケージサイズは小さくしたいですよね。

対応方法

ライブラリとして配布するファイル・ディレクトリを制限する

2つ方法があり、どちらでもいいです。
どちらの方法も取らない場合は、.gitignoreの内容がnpmに公開しないファイル・ディレクトリとして認識されます

.npmignoreファイルを用意する

.npmignoreは、.gitignoreのnpmバージョンと思えばOKです。
npmに公開しないファイルやディレクトリを指定できます。書き方も.gitignoreと同じです。

# .npmignore
.vscode
src
examples
.babelrc
.gitignore
webpack.config.js
postcss.config.js
rollup.config.js
node_modules
__tests__

package.jsonでfilesを指定する

npmに公開するファイルやディレクトリを指定できます。.npmignoreとは逆の発想の設定です。

また、README、package.json、LICENSEなどは指定しなくても、強制的にnpm公開対象に含まれます。詳しい説明はこちらで確認できます。

// package.json
{
  ... 
  "files": [
    "dist"
  ],
}

peerDependenciesに指定しているモジュールをバンドル対象から外す

peerDependenciesとは

package.jsonで指定できる依存関係です。指定方法はこんな感じ。ライブラリとの依存関係があるけど、自動的にインストールされないものです。

例えば、React用のライブラリを作った場合、そのライブラリを動かすにはreactとreact-domが必要です。しかし、React用のライブラリを使用するユーザーは、既にreactとreact-domはインストール済みであることがほとんどです。ユーザーがインストール済であれば、わざわざライブラリの中でreactとreact-domをインストールする必要がありません。そういった、インストールされている前提のようなパッケージを指定するのが通例です。

{
 ... ,
 "peerDependencies": {
    "react": "^16.0.0 || ^17.0.0",
    "react-dom": "^16.0.0 || ^17.0.0"
  }
}

バンドル対象から外す

peerDependenciesに指定しているパッケージは、ユーザーがインストールすることを前提にしているので、パッケージに入れる(バンドル)する必要はありません。
そのため、webpack, rollupなどのバンドル指定から外します。

webpack

jQueryをバンドルから外す場合はこんな感じ(詳細)。

// webpack.config.js
module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
};
rollup

react, react-domをバンドルから外す場合はこんな感じ(詳細)。

// rollup.config.js
export default {
  ...,
  external: ['react', 'react-dom'],
  output: {
    format: 'iife',
    name: 'myLib',
    globals: {
     react: 'React',
     'react-dom': 'ReactDOM',
    }
  }
};

実際どれくらい減ったか?

unpacked sizeに関しては、92%ほど減りました笑

修正前のパッケージサイズ
・package size: 372.6 kB
・unpacked size: 1.2 MB

  ↓

修正後のパッケージサイズ
・package size: 16.5 kB
・unpacked size: 98.2 kB

というか、私が作ったライブラリ、尋常じゃないくらいにサイズが大きかったんですが^^;
react-domをexternalに指定し忘れていたのが要因でした。
無事にパッケージサイズの削減ができて一安心です。

タイトルとURLをコピーしました