CI/CDでのパフォーマンスバジェットの強制

CI/CDにおけるパフォーマンスバジェット

パフォーマンスバジェットは強制されなければ意味がありません。自動化なしでは、締切のプレッシャーの下でバジェットは無視されます。バジェットチェックをCI/CDパイプラインに統合することで、パフォーマンスリグレッションを失敗テストと同じくらい可視化します。

CI/CD統合オプション

ツール	チェック対象	統合方法
size-limit	JSバンドルサイズ	npmスクリプト、GitHub Actions
bundlesize	任意のファイルサイズ	npmスクリプト、GitHub Status API
Lighthouse CI	フルページ指標	GitHub Actions、Jenkins
webpack-bundle-analyzer	バンドル構成	ビジュアル、手動レビュー

size-limitの設定

{
  "size-limit": [
    { "path": "dist/js/*.js", "limit": "200 KB" },
    { "path": "dist/css/*.css", "limit": "50 KB" }
  ]
}

ファイルが制限を超えると、どのファイルがバジェットオーバーかを示す明確なエラーメッセージでビルドが失敗します。

PRコメントのサイズ差分

size-limitなどのツールはプルリクエストにサイズ差分コメントを直接投稿できます。これによりレビューアーはすべてのコード変更のパフォーマンス影響を即座に把握できます。

定着させるために

• まず警告のみで開始し、チームが調整した後にエラーにアップグレード
• バンドルサイズチェックをすべての機能の「完了」の定義に含める
• 勝利を祝う — チームがバンドルサイズを削減した時に追跡・共有する