πŸ’ΈSave up to $132K/month in CI costs!πŸ‘‰ Try Free✨
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

Optimize Your CI/CD Pipeline

Get instant insights into your CI/CD performance and costs. Reduce build times by up to 45% and save on infrastructure costs.

45% Faster Builds
60% Cost Reduction
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.