Skip to content

jackyef/bundlewatch-gh-action

Use this GitHub action with your project
Add this Action to an existing workflow or create a new one
View on Marketplace

Repository files navigation

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/actions-yarn@v2.1.0
          - 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/bundlewatch-gh-action@0.1.0. 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/actions-yarn@v2.1.0
          - 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/actions-yarn@v2.1.0
          - 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! ⭐