How to Track Compressed File Size Changes with GitHub Actions

The GitHub Actions dashboard helps you spot bottlenecks and optimize your CI pipeline with actionable insights.

Live Demo

name: Compressed Size
on:
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: preactjs/compressed-size-action@v2

compressed-size-action

This action reports changes in compressed file sizes in your pull requests, supporting custom build scripts and file patterns.

What is compressed-size-action?​

The compressed-size-action compares compressed file sizes between your PR and the target branch, helping you track size changes in key files without uploading data to external services. It supports various file types and build systems.

How to Customize the Installation Command​

You can override the default dependency installation command using the install-script option. Here's an example using npm ci with a workspace:

with:
  install-script: "npm ci --workspace=packages/my-subpackage"

How to Customize the Build Script​

To change the build script from the default "build" npm script, use the build-script option. For example, if you have a custom CI build script:

with:
  build-script: "ci"

How to Clean Up Between Builds​

If you need to clean up modified files between the upstream and PR builds, you can specify a clean-script:

with:
  clean-script: "clean"

Here’s how it could look in your package.json:

{
  "scripts": {
    "clean": "rm -rf packages/node_modules"
  }
}

How to Track Specific Files​

To change the list of files being tracked, use the pattern and exclude options. Here's how you can specify which files to track:

with:
  pattern: "./build-output/**/*.{js,css,html,json}"
  exclude: "{./build-output/manifest.json,**/*.map,**/node_modules/**}"

By default, it tracks JavaScript files within dist/ directories.

How to Handle Hashed Filenames​

To remove hashes from filenames during comparison, use the strip-hash option. For example:

with:
  strip-hash: "\\b\\w{5}\\."

This would strip hashes like foo.abcde.js to foo.js.

How to Set a Minimum Change Threshold​

You can set a minimum change threshold in bytes to ignore small changes. For example, setting a threshold of 100 bytes:

with:
  minimum-change-threshold: 100

Files with a delta smaller than 100 bytes will be considered unchanged.

How to Change the Compression Algorithm​

By default, gzip compression is used. You can change this to brotli or disable compression entirely using the compression option:

with:
  compression: "none"

How to Run the Action Multiple Times in a PR​

If you need to check multiple bundles in a single PR, use the comment-key option to distinguish between different runs. For example:

with:
  build-script: "build:modern"
  comment-key: modern

And for a legacy bundle:

with:
  build-script: "build:legacy"
  comment-key: legacy

This ensures separate comments are created for each run.

Monitoring GitHub Actions Workflows

CICube is a GitHub Actions monitoring tool that provides you with detailed insights into your workflows to further optimize your CI/CD pipeline. With CICube, you will be able to track your workflow runs, understand where the bottlenecks are, and tease out the best from your build times. Go to cicube.io now and create a free account to better optimize your GitHub Actions workflows!