@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.