@luvio/bundlesize

Lds Bundlesize

This module is based on the bundlesize package. Adding some customizations for specific to checks in the LDS projects files.

LDS projects only generate the development versions of the files, this package allows to check the size of the bundle in dev (none), minified (min) and compressed using brotli (compressed).

Setup

npm install @luvio/bundlesize --save-dev

# or

yarn add @luvio/bundlesize --dev

Usage

Add it to your scripts in package.json

"scripts": {
  "test": "luvioBundlesize"
}

Configuration

luvioBundlesize accepts an array of files to check.

[
  {
    "path": "./build/vendor.js",
    "maxSize": {
        "none": "30 kB"
        "min": "10 kB",
        "compressed": "3 kB"
    }
  },
  {
    "path": "./build/chunk-*.js",
    "maxSize": {
        "none": "10 kB"
        "min": "4 kB",
        "compressed": "2 kB"
    }
  }
]

You can keep this array either in

package.json

{
  "name": "your cool library",
  "version": "1.1.2",
  "luvioBundlesize": [
    {
      "path": "./build/vendor.js",
      "maxSize": {
         "none": "30 kB"
         "min": "10 kB",
         "compressed": "3 kB"
      }
    }
  ]
}

or in a separate file

luvioBundlesize.config.json

Format:

{
  "files": [
    {
      "path": "./dist.js",
      "maxSize": {
        "compressed": "3 kB"
      }
    }
  ]
}

Customisation

Fuzzy matching

If the names of your build files are not predictable, you can use the glob pattern to specify files.

This is common if you append a hash to the name or use a tool like create-react-app/nextjs.

{
  "files": [
    {
      "path": "build/**/main-*.js",
      "maxSize": {
         "compressed": "1 kB"
      }
    },
    {
      "path": "build/**/*.chunk.js",
      "maxSize": {
         "min": "10 kB"
         "compressed": "3 kB"
      }
    }
  ]
}

It will match multiple files if necessary and create a new row for each file.