DEV Community

LironEr
LironEr

Posted on • Updated on

Monitor your app bundle size with BundleMon and GitHub actions

Your goal is to keep your bundle size as small as possible to reduce the amount of time it takes for users to load your website/application. This is particularly important for users on low bandwidth connections.

BundleMon is a free open-source tool that help you achieve that by constantly monitoring your bundle size on every commit and alerts you on changes.

This step by step guide will help you set up BundleMon with GitHub actions

Clone repo

For this guide I used this repo: https://github.com/Yog9/SnapShot

git clone https://github.com/Yog9/SnapShot
Enter fullscreen mode Exit fullscreen mode

Build

yarn build
Enter fullscreen mode Exit fullscreen mode

Add BundleMon

yarn add -D bundlemon@next
Enter fullscreen mode Exit fullscreen mode

Add BundleMon config

Create a file new file .bundlemonrc.json

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.*.js",
      "maxSize": "1kb"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Run BundleMon

yarn bundlemon
Enter fullscreen mode Exit fullscreen mode

localAnalyze

Ignore hash in filename

Changing app code will cause webpack to generate a new hash for files that have been changed.

main.e0277e23.chunk.js -> main.c2a935b4.chunk.js
Enter fullscreen mode Exit fullscreen mode

In order for BundleMon to know it's the same file you need to add <hash> string to file path config:

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.<hash>.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.<hash>.js",
      "maxSize": "1kb"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

localAnalyze-hash

GitHub action

Install BundleMon GitHub App.

Create a new file .github/workflows/build.yml

name: Build

on:
  push:
    branches: [master]
  pull_request:
    types: [synchronize, opened, reopened]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 16
        uses: actions/setup-node@v2-beta
        with:
          node-version: "16"

      - name: Install dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Run BundleMon
        run: yarn bundlemon
        env:
          CI_COMMIT_SHA: ${{github.event.pull_request.head.sha || github.sha}} # important!
Enter fullscreen mode Exit fullscreen mode

Make sure to set CI_COMMIT_SHA env var, more info can be found here

Add GitHub PR integration

Make sure you already installed BundleMon GitHub App.

Add to your BundleMon config file:

"reportOutput": ["github"]

// or override default options

"reportOutput": [
  [
    "github",
    {
      "checkRun": false,
      "commitStatus": true,
      "prComment": true
    }
  ]
]
Enter fullscreen mode Exit fullscreen mode

When creating your first PR with BundleMon you should see all files found by BundleMon as "Added", because there isn't a record on your main branch.

pr-comment
pr-status

Once you merge the PR BundleMon will keep a record on your main branch, so on your next PR you should see the difference between the PR and your main branch.

This tutorial also available here

Top comments (0)