Giter Club home page Giter Club logo

size-limit-action's Introduction

Size Limit Action

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

tests status

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

  1. Install Size Limit choosing the scenario that fits you better (JS Application, Big Libraries or Small Libraries).
  2. 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"
},
  1. Define Size limit configuration. For example (inside package.json):
"size-limit": [
  {
    "path": "dist/index.js",
    "limit": "4500 ms"
  }
]
  1. Add the following action inside .github/workflows/size-limit.yml
name: "size"
on:
  pull_request:
    branches:
      - master
permissions:
  pull-requests: write
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
  1. 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/

Customizing the Package Manager

By default, the action will attempt to autodetect which package manager to use, but in some cases like those who are using a monorepo and the directory option, this may not detect the correct manager. You can manually specify the package manager with the package_manager option.

with:
  github_token: ${{ secrets.GITHUB_TOKEN }}
  directory: packages/client/
  package_manager: yarn

Feedback

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

size-limit-action's People

Contributors

andresz1 avatar dependabot[bot] avatar jasonlgrd avatar amilajack avatar ai avatar billyvg avatar 0xcadams avatar nwaughachukwuma avatar cliftonh avatar ninerian avatar dcwither avatar devethan avatar drapegnik avatar pilotconway avatar vincentmacri avatar vmizgiris-equinix avatar azu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.