Skip to content
play

GitHub Action

Bundlewatch Github Action

0.3.0 Latest version

Bundlewatch Github Action

play

Bundlewatch Github Action

Run bundlewatch against your PR to keep those bundles in check! Update your package.json according to bundlewatch config

Installation

Copy and paste the following snippet into your .yml file.

              

- name: Bundlewatch Github Action

uses: jackyef/[email protected]

Learn more about this action in jackyef/bundlewatch-gh-action

Choose a version

Bundlewatch GitHub Action

This GitHub action allows you to easily run bundlewatch in your repository.

For the full configuration please have a look at the action.yml file.

How to use:

  1. Add bundlewatch configuration in your package.json. Refer to this doc for a more complete explanation.

    {
      "name": "my-package",
      "bundlewatch": {
        "trackBranches": [
          "master"
        ],
        "files": [
          {
            "path": "./packages/react-isomorphic-data/dist/esm/index.js",
            "maxSize": "4.5 KB"
          }
        ]
      }
    }

    An example of a real-world project using this can be seen here

  2. Get a BUNDLEWATCH_GITHUB_TOKEN by following this step

  3. Set the token as a secret in your GitHub repository

    image

  4. Set up a workflow.yml for your tracked branch. For example, if you are tracking the bundlesize of master branch, you should create a workflow whenever a push to master happens like so:

    name: "Bundlewatch GitHub Action - on Tracked Branches Push"
    
    on:
      push:
        branches:
          - master
    
    jobs:
      bundlewatch:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: Borales/[email protected]
          - run: yarn install
          - uses: jackyef/bundlewatch-gh-action@master
            with:
              build-script: yarn build:minify
              bundlewatch-github-token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}

    You would probably want to change the build-script to whatever script you want to run to produce your output bundle.

    Note: build-script is actually optional, just in case your workflow does not need build step and you are measuring the size of already committed files

    Note 2: It is recommended to use a specific version of this action instead of @master. For example: - uses: jackyef/[email protected]. This is because some commits that aren't ready to be released yet might make it into master branch.

  5. To add statuses on pull requests, you can add another workflow for pull requests synchronize and opened events as following:

    name: "Bundlewatch GitHub Action"
    
    on:
      pull_request:
        types: [synchronize, opened]
    
    jobs:
      bundlewatch:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: Borales/[email protected]
          - run: yarn install
          - uses: jackyef/bundlewatch-gh-action@master
            with:
              build-script: yarn build:minify
              bundlewatch-github-token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
  6. If you are using an external config file, you can pass the file path to bundlewatch-config parameter

    name: "Bundlewatch GitHub Action"
    
    on:
      pull_request:
        types: [synchronize, opened]
    
    jobs:
      bundlewatch:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: Borales/[email protected]
          - run: yarn install
          - uses: jackyef/bundlewatch-gh-action@master
            with:
              build-script: yarn build:minify
              bundlewatch-github-token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
              bundlewatch-config: .bundlewatch.config.js

Feedback

Feel free to open issues for feature requests. If you want to contribute, feel free to open a pull request as well!

Credits

This GitHub action will not be possible without the work done at bundlewatch. Go there and give them a star! ⭐