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

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

対応方法
1. ライブラリとして配布するファイル・ディレクトリを制限する
2. peerDependenciesに指定しているモジュールをバンドル対象から外す
実際どれくらい減ったか？

対応方法

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

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

.npmignoreファイルを用意する

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

.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公開対象に含まれます。詳しい説明はこちらで確認できます。

{
  // ... 
  "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をバンドルから外す場合はこんな感じ（詳細）。

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
};

rollup

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

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