はじめに
size-limit-action を使用して Pull Request の画面上でパッケージのサイズをチェックする方法を紹介します。
サイズを確認することができるだけでなく、実際のパッケージサイズが指定した limit を超えている場合は PR をブロックすることも可能です。
前提
PR を作成した時に各パッケージのサイズのチェック、結果の確認ができることを目標にします。
レポジトリの構成としてはモノレポで、packages ディレクトリ以下に複数のパッケージ（p1, p2）が存在することを想定します。
├── node_modules
├── package.json
├── packages
│ ├── p1
│ │ ├── dist
│ │ │ ├── index.d.ts
│ │ │ └── index.js
│ │ ├── package.json
│ │ ├── src
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ └── p2
│ ├── dist
│ │ ├── index.d.ts
│ │ └── index.js
│ ├── package.json
│ ├── src
│ │ └── index.ts
│ └── tsconfig.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
packages:
- packages/**
packages（p1, p2）にはテキトーに index.ts ファイルを配置して build コマンドで dist ディレクトリにファイルを生成するようにしておきます。
p1 の例を以下に示しますが p2 に関しても p1 と同様にテキトーな ts ファイルを準備しています。
const hello = () => {
console.log("hello");
};
export default hello;
{
"name": "p1",
"version": "1.0.0",
"description": "",
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"require": {
"types": "./dist/cjs/index.d.cts",
"default": "./dist/cjs/index.cjs"
}
},
"./*": "./*"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC"
}
実践
インストール
プロジェクトのルートで以下を実行します
pnpm add -D size-limit @size-limit/preset-small-lib -w
@size-limit/preset-small-lib について
Plugin presets の一種です。
@size-limit/preset-small-libは@size-limit/fileと@size-limit/esbuildというプラグインを含むプリセットで、小さいライブラリに適しています。大きサイズ用のプリセット（実行時間を測れる）もあったりします。
詳しくはこちらを参照してください。
ルートの package.json に size-limit の設定を追加
- ローカルでのパッケージサイズ確認用に
sizeという npm script を追加しました- 実際に github actions で実行するためだけであれば、この作業は必要ありません。
- size-limit の設定として packages(p1, p2)の 各 dist ディレクトリのファイルに limit を設定しました。
設定できるオプションについてはこちらを参照してください。
{
"name": "size-limit-demo",
"scripts": {
"build": "pnpm run -r --parallel --aggregate-output build",
"size": "pnpm run build && size-limit"
},
"devDependencies": {
"@size-limit/preset-small-lib": "^11.1.4",
"size-limit": "^11.1.4"
},
"size-limit": [
{
"path": "packages/p1/dist/index.js",
"limit": "10 kB"
},
{
"path": "packages/p2/dist/index.js",
"limit": "100 B"
}
]
}
ローカルで実行してみる
sizeを実行してみます。
pnpm run size
...
packages/p1 build$ tsc
packages/p2 build$ tsc
packages/p1 build: Done
packages/p2 build: Done
✔ Adding to empty esbuild project
packages/p1/dist/index.js
Size limit: 10 kB
Size: 43 B with all dependencies, minified and brotlied
packages/p2/dist/index.js
Package size limit has exceeded by 285 B
Size limit: 100 B
Size: 386 B with all dependencies, minified and brotlied
Try to reduce size or increase limit in "size-limit" section of package.json
ELIFECYCLE Command failed with exit code 1.
p1 の結果は 43B で limit の 10 kB の範囲内に収まっていそうです。
p2 の結果は 386B で limit の 1B を超え、exit code1 でエラーになっていることがわかります。
GitHub Actions で実行する
以下のようにsize-limit.ymlを作成します。
andresz1/size-limit-action@v1.8.0を使用します。
Pull Request に対してコメントできるようにする必要があるのでpermissionsを設定しています。
詳しい設定項目は README を参照してください。
name: "Size Limit"
on:
pull_request:
branches: [main]
jobs:
size-limit:
permissions:
contents: read
pull-requests: write
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
- uses: pnpm/action-setup@v4
with:
version: latest
run_install: true
- uses: andresz1/size-limit-action@v1.8.0
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
package_manager: pnpm
main にマージする
この actions は main ブランチとの size の diff をチェックするので一度 main にマージします
実際にファイルに差分を出してみる
main にマージしてから再度別ブランチを切り、p2 のファイルを 100B 未満 にして Pull Request を作成してみます。すると size-limit の action が正常に終了し、パッケージサイズと main ブランチとの差分がコメントされます。limit を 100B に設定しているのに対し、実際のパッケージサイズが 34B なので OK ということですね。
反対に、p2 のファイルを 100B 以上にしてみます。すると size-limit の action がエラーになることがわかります。limit を 100B に設定しているのに対し、実際のパッケージサイズが 386B なので NG ということですね。
おわりに
以上、size-limit-action を使用したパッケージサイズのチェック方法を紹介しました。
ライブラリに導入する機会が直近であり、日本語での紹介記事があまりないようだったので書いてみました。
参考になれば嬉しいです。
参考
ユーザーファーストなサービスを伴に考えながらつくる、デザインとエンジニアリングの会社です。エンジニア積極採用中です！hrmos.co/pages/funteractive/jobs
Discussion