OpenWeb-Archive/bundlewatch

Keep watch of your bundle size

BundleWatch

BundleWatch checks file sizes, ensuring bundled browser assets don't jump in file size.
Sharp increases in BundleWatch can signal that something is wrong - adding a package that bloats the slug, a wrong import, or forgetting to minify.

Add BundleWatch to your project

1. yarn add @spotim/bundlewatch

2. add a bundlewatch.json to your project with the names of your bundles and their max sizes, and an optionally reporting service (currently only supports grafana), example:

   {
   "files": [
       {
           "path": "./dist/launcher/launcher-bundle.js",
           "maxSize": "70 KB"
         },
         {
           "path": "./dist/vendor/vendor-bundle.js",
           "maxSize": "132 KB"
         }
   ],
   "reporter": ["grafana"]
   }
   
   

3. add a script in package.json that will run bundlewatch from your bundlewatch.json:

     ...
     "bundlewatch": "bundlewatch --config bundlewatch.json"
     ...

4. update your circleCI build config (config.yml). The script must run after the building of the production assets, example:

      - run:
          name: Build Production Assets
          command: PUBLIC_PATH=https://static-cdn.spot.im/production/conversation/tags/${CIRCLE_TAG}/ yarn run build:circleci
      - run:
          name: Check bundle size
          command: yarn run bundlewatch

5. PROFIT

Notes:

- Bundlewatch will report to grafana dashboard: Bundle-size-monitoring.
- Bundlewatch will report to the slack channel: #bundle-size-monitoring every build that:
     1. Exceeded the maxSize argument
     2. Grew more than 5% kB's from the master build size

Projects that use bundlewatch for references: Launcher, Conversation