andresz1/size-limit-action

A GitHub action that compares the real cost of your JavaScript in every pull request

This action uses Size Limit (performance budget tool for JavaScript) to calculate the real cost of your JavaScript for end-users. The main features of this action are:

Commenting pull requests with the comparison of Size Limit output.
Rejecting a pull request if the cost exceeds the limit.

pr comment

Usage

Install Size Limit choosing the scenario that fits you better (JS Application, Big Libraries or Small Libraries).
By default this action will try to build your PR by running build npm script located in your package.json. If something need to be done after dependencies are installed but before building postinstall npm script could be used. For example, using lerna:
```
"scripts": {
"postinstall": "lerna bootstrap",
"build": "lerna run build"
},
```
Define Size limit configuration. For example (inside package.json):
```
"size-limit": [
{
"path": "dist/index.js",
"limit": "4500 ms"
}
]
```
Add the following action inside .github/workflows/size-limit.yml
```
name: "size"
on:
pull_request:
branches:
  - master
jobs:
size:
runs-on: ubuntu-latest
env:
  CI_JOB_NUMBER: 1
steps:
  - uses: actions/checkout@v1
  - uses: andresz1/size-limit-action@v1
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
```
You can optionally specify a custom npm script to run instead of the default build adding a build_script option to the yml workflow shown above. Additionally, providing a skip_step option will tell the action to skip either the install or build phase.

with:
  github_token: ${{ secrets.GITHUB_TOKEN }}
  build_script: custom-build
  skip_step: install

Add clean_script option to specify npm script to run after size-limit results are collected. This is useful to clean up leftover assets.

with:
  github_token: ${{ secrets.GITHUB_TOKEN }}
  clean_script: cleanup

You are now all set

Customizing size-limit script

Use script option to customize the size-limit execution script (the output should always be a json), which defaults to npx size-limit --json.

with:
  github_token: ${{ secrets.GITHUB_TOKEN }}
  script: yarn dlx size-limit --json

Customizing working directory

The directory option allow to run all the tasks in a subfolder. It's only convenient if all your stuff is in a subdirectory of your git repository.

For instance, if package.json is in the subfolder client/:

with:
  github_token: ${{ secrets.GITHUB_TOKEN }}
  build_script: custom-build
  skip_step: install
  directory: client/

Feedback

Pull requests, feature ideas and bug reports are very welcome. We highly appreciate any feedback.