Popularity
1.0
Growing
Activity
6.7
Growing
21
2
2

Description

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.

Programming language: TypeScript
License: MIT License
Tags: Webpack     Size     Monitor     Bundlesize     Bundle    
Latest version: v0.3.1

BundleMon alternatives and similar libraries

Based on the "Miscellaneous" category.
Alternatively, view BundleMon alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of BundleMon or a related project?

Add another 'Miscellaneous' Library

README

BundleMon

npm node

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.

Features

  • 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 - temporarily not available

Guides

Setup

npm install bundlemon --save-dev

# or

yarn add bundlemon --dev

Add bundlemon property to your package.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 found here

Name Description Type Default
baseDir Relative/absolute path to the directory string process.cwd()
files [Files config](./docs/types.md#File) FileConfig[] required -
groups Sum all file sizes matching the pattern, rules applies to the sum of the files [Groups config](./docs/types.md#File) FileConfig[] -
defaultCompression Use compression before calculating file size "none" \ "gzip" \
reportOutput [Output options](./docs/output.md) `(string \ [string, object])[]`
verbose Print more details boolean false

CLI usage

You can also set some of the variables using CLI flags

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

[CLI flags docs](./docs/cli-flags.md)

Create new project

In order to save history and get differences from your main branches 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 to BUNDLEMON_PROJECT_ID and the API key to BUNDLEMON_PROJECT_APIKEY environment variables in your CI

Set additional environment variables

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, CircleCI and Codefresh) you dont need to set anything.

  • CI=true
  • CI_REPO_OWNER - github.com/LironEr/bundlemon LironEr
  • CI_REPO_NAME - github.com/LironEr/bundlemon bundlemon
  • 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

Using hash in file names?

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.html
home.b72f15a3.chunk.js
login.057c430b.chunk.js
bundle.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

GitHub integration

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

Just Install BundleMon GitHub App

Then add github to reportOutput

"reportOutput": ["github"]

// override default options

"reportOutput": [
  [
    "github",
    {
      "checkRun": false,
      "commitStatus": true,
      "prComment": true
    }
  ]
]

GitHub action example & forks support

BundleMon supports running on PRs originating from forks, ONLY on public repos and by removing BUNDLEMON_PROJECT_APIKEY variable.

Step by step guide to set up BundleMon with Github actions

name: Build

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

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/[email protected]
      - name: Use Node.js 12
        uses: actions/[email protected]
        with:
          node-version: '12'

      - name: Install dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: override CI_COMMIT_SHA
        if: github.event_name == 'pull_request'
        run: echo "CI_COMMIT_SHA=${{ github.event.pull_request.head.sha}}" >> $GITHUB_ENV

      - name: Run BundleMon
        run: yarn bundlemon
        env:
          BUNDLEMON_PROJECT_ID: YOUR_PROJECT_ID
          BUNDLEMON_PROJECT_APIKEY: ${{ secrets.BUNDLEMON_PROJECT_APIKEY }} # not required for public repos

Make sure you have override CI_COMMIT_SHA step before BundleMon step, more info can be found here

Credits