A GitHub action that reports changes in compressed file sizes on your PRs.

• Automatically usesyarn,pnpm,bun, ornpm ci when lockfiles are present
• Builds your PR, then builds the target and compares between the two
• Doesn't upload anything or rely on centralized storage
• Supportscustom build scripts andfile patterns

Add a workflow (.github/workflows/main.yml):

name:Compressed Sizeon:[pull_request]jobs:build:runs-on:ubuntu-lateststeps:      -uses:actions/checkout@v2      -uses:preactjs/compressed-size-action@v2

By default,compressed-size-action will install dependencies according to which lockfiles are present, if any. However, if you need to run a different installation command, you can pass a custom script to do so. For example, to usenpm ci with the--workspace option:

name: Compressed Sizeon: [pull_request]jobs:  build:    runs-on: ubuntu-latest    steps:    - uses: actions/checkout@v2    - uses: preactjs/compressed-size-action@v2      with:+       install-script: "npm ci --workspace=packages/my-subpackage"

By default,compressed-size-action will try to build your PR by running the"build"npm script in yourpackage.json.

If you need to perform some tasks after dependencies are installed but before building, you can use a "postinstall" npm script to do so. For example, in Lerna-based monorepo:

{"scripts": {"postinstall":"lerna bootstrap","build":"lerna run build"  }}

It is also possible to define a"prebuild" npm script, which runs after"postinstall" but before"build".

You can also specify a completely differentnpm script to run instead of the default ("build"). To do this, add abuild-script option to youryml workflow:

name: Compressed Sizeon: [pull_request]jobs:  build:    runs-on: ubuntu-latest    steps:    - uses: actions/checkout@v2    - uses: preactjs/compressed-size-action@v2      with:+       build-script: "ci"

For repositories or custom monorepo setups where files are modified in ways that are not reset bynpm ci && npm run build, it may be necessary to define a custom "clean" script. This script resets any file modifications after the upstream (target) build ends and your PR code (HEAD) is checked out, but before installation of npm dependencies forHEAD:

name: Compressed Sizeon: [pull_request]jobs:  build:    runs-on: ubuntu-latest    steps:    - uses: actions/checkout@v2    - uses: preactjs/compressed-size-action@v2      with:        repo-token: "${{ secrets.GITHUB_TOKEN }}"+       clean-script: "clean"

// package.json{"scripts": {// example - a simple nested node_modules setup:"postinstall":"cd packages && npm i",// between the two builds, we need to delete the inner node_modules:"clean":"rm -rf packages/node_modules"  }}

compressed-size-action defaults to tracking the size of all JavaScript files withindist/ directories - anywhere in your repository, not just at the root. You can change the list of files to be tracked and reported using thepattern andexclude options, both of which areminimatch patterns:

name: Compressed Sizeon: [pull_request]jobs:  build:    runs-on: ubuntu-latest    steps:    - uses: actions/checkout@v2    - uses: preactjs/compressed-size-action@v2      with:+       pattern: "./build-output/**/*.{js,css,html,json}"+       exclude: "{./build-output/manifest.json,**/*.map,**/node_modules/**}"

Files are collected by finding matches forpattern, then any of those that matchexclude are ignored. For that reason, most projects don't need to modifyexclude. The default values forpattern andexclude are as follows:

with:# Any JS files anywhere within a dist directory:pattern:"**/dist/**/*.{js,mjs,cjs}"# Always ignore SourceMaps and node_modules:exclude:"{**/*.map,**/node_modules/**}"

Astrip-hash option was added inv2 that allows passing a custom Regular Expression pattern that will be used to remove hashes from filenames. The un-hashed filenames are used both for size comparison and display purposes.

By default, the characters matched by the regex are removed from filenames.In the example below, a filenamefoo.abcde.js will be converted tofoo.js:

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

This can be customized further using parens to create submatches, which mark where a hash occurs. When a submatch is detected, it will be replaced with asterisks. This is particularly useful when mix of hashed and unhashed filenames are present.In the example below, a filenamefoo.abcde.chunk.js will be converted tofoo.*****.chunk.js:

strip-hash:"\\.(\\w{5})\\.chunk\\.js$"

By default, a file that's been changed by a single byte will be reported as changed. If you'd prefer to require a certain minimum threshold for a file to be changed, you can specifyminimum-change-threshold in bytes:

minimum-change-threshold:100

In the above example, a file with a delta of less than 100 bytes will be reported as unchanged.

By default, files are compared after gzip compression, but it's possible to use other compression algorithms (gzip/brotli/none) or disable the compression.

compression:"none"

The action reuses the same comment each time it runs on a PR. In order to run the action multiple times against separate bundles for a single PR, you must provide acomment-key option, which the action will use to determine which comment to add or update for the run. The example below demonstrates this for separate "modern" and "legacy" bundles:

name: Compressed Sizeon: [pull_request]jobs:  modern-bundle-size-check:    runs-on: ubuntu-latest    steps:    - uses: actions/checkout@v2    - uses: preactjs/compressed-size-action@v2      with:        build-script: "build:modern"+       comment-key: modern  legacy-bundle-size-check:    runs-on: ubuntu-latest    steps:    - uses: actions/checkout@v2    - uses: preactjs/compressed-size-action@v2      with:        build-script: "build:legacy"+       comment-key: legacy

If you do not provide this key, the action will attempt to use (and therefore replace) the same comment for both bundles, hiding the output for whichever run finished last.

Contributors34 (34)

• Open an issue11 (11)
• Pull requests3 (3)
• View source code
• Report abuse

compressed-size-action is not certified by GitHub. It is provided by a third-party and is governed by separate terms of service, privacy policy, and support documentation.

About

Tags

Resources