ビルドスクリプトのサイズを通知する仕組みをGitHub Actionsで作成

1 min read読了の目安(約1700字

ビルドファイルは、開発が進むと、徐々に肥大化するものです。

今回は、GitHub のマーケットプレイスに公開されている compressed-size-action を利用して、
プルリクエストを作成した際に、ビルドファイルのサイズがどれだけ増減したかを通知する仕組みを
GitHubActions で作成したので紹介したいと思います。

利用した GitHub Action

https://github.com/marketplace/actions/compressed-size-action

この GitHub Action は PR 作成・更新時に圧縮後のビルドファイルサイズの増減をレポートします。
preact(reactの軽量版) の作者が作成しており、実際にpreactのCIとして利用されています。

使い方

通知したいリポジトリに下記のワークフローファイルを追加します。

/.github/workflows/main.yml
name: Compressed Size

on:
  pull_request:

jobs:
  build:
    runs-on: ubuntu-20.04
    steps:
      # GitHubActionsが実行されたブランチにチェックアウトする
      - uses: actions/checkout@v2
      # ビルドファイルの生成&ファイルサイズの取得&通知
      - uses: preactjs/compressed-size-action@v2
        with:
          # PRコメント欄に通知するために必要です
          repo-token: "${{ secrets.GITHUB_TOKEN }}"

通知イメージ
プルリクエストのコメントに通知が追加されます

オプションについて

下記利用ケースにおいては、オプションを追加することで対応可能です。
オプションは、ワークフローの対象ステップの with 句に追加します。

build 時のスクリプトを変更する場合

build-scriptを利用します
デフォルトでは、buildが実行されます。

ビルドする対象のファイルを指定したい場合

patternを利用します
デフォルトでは、dist/が参照されます。

指定したファイルから特定ファイルを除外したい場合

excludeを利用します
デフォルトでは、除外されません。

hash が付与されたファイルの名前から hash を取り除きたい場合

strip-hashを利用します。
デフォルトでは、何もしません。

ビルドファイルにはapp.123456.chunk.jsのように、ハッシュ値を含ませている場合があります。
strip-hash: "\\.(\\w{6})\\.chunk\\.js$"とすることで、ファイル名はapp.chunk.jsと変換されます。

ファイルサイズの増減を通知する最小サイズを指定したい場合

minimum-change-thresholdを指定します。
デフォルトでは、1byte でも差分があれば通知されます。

ファイルサイズの増減を通知する最小サイズを指定した場合、
指定したサイズ以上の増減があった場合のみコメントに通知されます。

最後に

最後までお読みいただきありがとうございます。

今回は、ビルドファイルの増減のトラッキングがしたかったわけですが、
数行のGitHubActionsの実装で実現することができました。

今回作成したワークフローは既存のワークフローに影響を与えずに追加することができるので、
すでに運用しているプロジェクトへの追加も簡単に行えると思います。