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