Skip to main content
← Back to workflows

How to Track Compressed File Size Changes with GitHub Actions

preactjs-compressed-size-action -
GitHub Action
2.7.0
603
Contributors
Contributor - developitContributor - andrewigginsContributor - einSelbst
Categories
CICUBE ANALYTICS INSIGHTS
Engineering Velocity: 25% Team Time Lost to CI Issues
View Platform →
3.5h
Time Saved/Dev/Week
40%
Faster Releases
Click for next insight
Usage
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 logo

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.