Repository files navigation

BundleMon helps you to monitor your bundle size.

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 helps you achieve that by constantly monitoring your bundle size on every commit and alerts you on changes.

• Set max size for files, will fail build if exceeded
• Compare files to base branch
• Set max increase allowed in percentage from base branch, will fail build if exceeded
• Supports multiple CI
• Integrates with Github, can post build status & comment with detailed information
• History report -example

• Migration guide from v1 to v2
• Step by step guide to set up BundleMon with Github actions
• Step by step guide to set up BundleMon with CodeFresh

npm install bundlemon --save-dev# oryarn add bundlemon --dev

Addbundlemon property to yourpackage.json

"bundlemon": {  "baseDir": "./build",  "files": [    {      "path": "index.html",      "maxSize": "2kb",      "maxPercentIncrease": 5    },    {      "path": "bundle.<hash>.js",      "maxSize": "10kb"    },    {      "path": "assets/**/*.{png,svg}"    }  ]}

BundleMon config can be placed in other places like:.bundlemonrc,.bundlemonrc.json,bundlemon.config.js exporting a JS object, more forms can be foundhere

You can also set some of the variables using CLI flags

bundlemon --config my-custom-config-path.json

CLI flags docs

When using hash in file names the file name can be changed every build.

In order for BundleMon to keep track of your files you can use<hash> to replace the hash with a constant string.

For example:

index.htmlhome.b72f15a3.chunk.jslogin.057c430b.chunk.jsbundle.ea45e578.js

Config:

"bundlemon": {"baseDir":"./build","files": [    {"path":"*.<hash>.chunk.js"    },    {"path":"*.<hash>.js"    }  ]}

Output:

[PASS] bundle.(hash).js: 19.67KB[FAIL] home.(hash).chunk.js: 70.09KB > 50KB[PASS] login.(hash).chunk.js: 3.37KB < 50KB

In order to save history and get differences from your main branches BundleMon will need a project id.

If you are running BundleMon in GitHub actions BundleMon will detect all necessary information automatically, JustInstall BundleMon GitHub App.

If not, you will need to create a new project and setup environment variables.

• Create new project and copy the project ID and API key
• Add the ID toBUNDLEMON_PROJECT_ID and the API key toBUNDLEMON_PROJECT_APIKEY environment variables in your CI

BundleMon can create GitHub check run, post commit status and a detailed comment on your PR.

1. Install BundleMon GitHub App

2. Setup integration

   • If BundleMon runs in GitHub actions you can go to step 2.

   • If BundleMon not runs In GitHub actions you will need tocreate GitHub access token without any scopes, the token owner must have write permission to the repo you would want to post outputs to.

     Add the token toBUNDLEMON_GITHUB_TOKEN environment variable in your CI.

     The token is not saved in BundleMon service, ONLY used to verify the username that created the token.

3. Addgithub toreportOutput

   "reportOutput": ["github"]// override default options"reportOutput": [  ["github",    {"checkRun":false,"commitStatus":true,"prComment":true    }  ]]// each option support conditional values"reportOutput": [  ["github",    {"checkRun":false,// can also be "off""commitStatus":true,// can also be "always""prComment":"on-failure"    }  ]]

   Each option support one of:true | false | "always" | "on-failure" | "pr-only" | "off"

   "on-failure" option means thatonly when BundleMon limit exceeded then it will post the output (check run / commit status / PR comment) to GitHub

BundleMon supports running on PRs originating from forks.

Step by step guide to set up BundleMon with Github actions

name:Buildon:push:branches:[main]pull_request:types:[synchronize, opened, reopened]jobs:build:runs-on:ubuntu-lateststeps:      -uses:actions/checkout@v3      -name:Setup Nodeuses:actions/setup-node@v3with:node-version:'18'      -name:Install dependenciesrun:yarn      -name:Buildrun:yarn build      -name:BundleMonuses:lironer/bundlemon-action@v1

In order to get BundleMon to work you'll need to set these environment variables:

If you are using one of the supported CIs (GitHub Actions, Travis and Codefresh) you dont need to set anything. CircleCI is also supported, but you need to manually setCI_TARGET_BRANCH.

• CI=true
• CI_REPO_OWNER - github.com/LironEr/bundlemonLironEr
• CI_REPO_NAME - github.com/LironEr/bundlemonbundlemon
• CI_BRANCH - source branch name
• CI_COMMIT_SHA - commit SHA
• CI_TARGET_BRANCH - target branch name, only set if BundleMon runs on a pull request
• CI_PR_NUMBER - PR number, only set if BundleMon runs on a pull request
• CI_COMMIT_MESSAGE - Optional, set it ifincludeCommitMessage option istrue

By default BundleMon is running on a free hosted server, you can also run BundleMonon your server.

Limitations of the free hosted service:

• Records created by a PR will be deleted after 30 days.
• Records in branches without activity (new commits) will be deleted after 180 days.
• After 90 days only the latest record per day will be kept.

More limitations may be added in the future as more and more projects use the free hosted service.

If you want to support this project and help with server costs please considerdonating ❤

Read thecontributing guide to learn how to run this project locally and contribute.