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
Build
yarn build
Add BundleMon
yarn add -D bundlemon@next
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"
}
]
}
Run BundleMon
yarn bundlemon
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
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"
}
]
}
GitHub action
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!
Make sure to set
CI_COMMIT_SHAenv 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
}
]
]
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.
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)