📦📊 GitHub Action to reports on the size of your npm package
pkg-size-action is a GitHub Action for getting automated size reports on your pull-requests.
If you like this project, please star it & follow me to see what other cool projects I'm working on! ❤️
Create the following file in your repo: .github/workflows/package-size-report.yml
:
name: Package Size Report
on:
pull_request:
branches: [ master, develop ] # ⬅ Add other branches you want size checks on
jobs:
pkg-size-report:
name: Package Size Report
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14' # ⬅ Specify a version of Node.js to build your app
- name: Package size report
uses: pkg-size/action@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Try making a PR against one of the designated branches.
📊 Get the pkg-size report as a comment on the PR!
You'll see a comment on your PR reporting the package size regression. This comment will be automatically updated as you push changes to your PR.
The default behavior detects whether npm run build
exists. If not, it assumes your repo doesn't have a build step and won't try to install dependencies.
If your repo has a different build script, specify one with build-command
. Disable building by passing in false
.
name: Package Size Report
on:
pull_request:
branches: [ master, develop ]
jobs:
pkg-size-report:
name: Package Size Report
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Package size report
uses: pkg-size/action@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
build-command: npm run prod-build # ⬅ Set a different build script here
By default, ubuntu-latest
has the latest version of node available. If your
repo needs to specify an exact version of node, you can use the actions/setup-node
action.
name: Package Size Report
on:
pull_request:
branches: [ master, develop ]
jobs:
pkg-size-report:
name: Package Size Report
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: '14.4.0'
- name: Package size report
uses: pkg-size/action@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Source-maps might add unnecessary noise to your report. Hide them using a glob.
name: Package Size Report
on:
pull_request:
branches: [ master, develop ]
jobs:
pkg-size-report:
name: Package Size Report
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Package size report
uses: pkg-size/action@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
hide-files: '*.{js,css}.map' # Set a glob to filter out irrelevant files
The default behavior hides unchanged files in a collapsible. To include unchanged files in the visible table, set unchanged-files
to show
.
name: Package Size Report
on:
pull_request:
branches: [ master, develop ]
jobs:
pkg-size-report:
name: Package Size Report
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Package size report
uses: pkg-size/action@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
unchanged-files: show # ⬅ Make unchanged files appear in the same table
Use display-size: brotli
to only show Brotli compression size. Use a comma separated list to show multiple sizes.
name: Package Size Report
on:
pull_request:
branches: [ master, develop ]
jobs:
pkg-size-report:
name: Package Size Report
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Package size report
uses: pkg-size/action@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
display-size: uncompressed, brotli # ⬅ Comma separated list of sizes to show
Default: npm run build
if it exists in package.json
, otherwise false
.
Command to build the package and produce distribution files with. Pass in false
to disable attempting to produce a build.
Default: true
Possible values: true
, false
Whether to comment the build size report on the PR or not.
Default: regression
Possible values: regression
, head-only
Sets the size report mode:
regression
: Builds both head
and base
branch and compares difference.head-only
: Only builds and reports on head
branch.Default: uncompressed
Possible values: uncompressed
, gzip
, brotli
Which size to show. Pass in a comma-separated list for multiple.
Default: collapse
Possible values: show
, collapse
, hide
Whether to show unchanged files.
Default: delta
Possible values: delta
, headSize
, baseSize
, path
Which property to sort the files list by. delta
is the size difference.
Default: desc
Possible values: desc
, asc
Files list sort order.
Glob pattern to hide files. For example, if you want to hide source-maps:
hide-files: '*.{js,css}.map'
Yes. All you need to do is specify distribution files in the files
array in package.json
.
size-limit-action approaches size monitoring from a budgeting standpoint, and has features such as rejecting PRs if the proposed changes are too large. It requires specifying each distribution file and doesn't show compression sizes.
pkg-size-action accepts that size increases can be often warranted if the feature/bug-fix is important, and approaches monitoring from a purely informational standpoint. It encourages being size conscious without blocking your changes. pkg-size-action can also automatically detect distribution files based on your package.json
configuration.
MIT © Hiroki Osame
Logo made by Freepik