Size Limit is a performance budget tool for JavaScript. It checks every commit on CI, calculates the real cost of your JS for end-users and throws an error if the cost exceeds the limit.

install plugin

npm install -D nx-size-limit

Install size-limit presets

npm install -D size-limit @size-limit/preset-app

** Read Usage section

Usage

** Requires a prior build of the target project.

Configure size-limit

nx g nx-size-limit:add --name=your-project

Options

| Name | Type | Required | Default | Description | |---------------|--------------------------------|:--------:|---------|-----------------------------------------------------------------------| | name | string | ✅ | | The name of the target project. | | projectsDir | string | - | apps | The name of the project host directory. Typically apps/libs/packages. | | bundler | string | - |webpack| The name of the bundler used when building the target project. |

nx g nx-size-limit:add --name=your-lib --projectsDir=libs --bundler=vite

When running the nx-size-limit:add generator a new .size-limit.json config will be generated in your project root folder.

The default config contains the relative path to your main bundle and the limited size of it.

[
  {
    "path": ["../../dist/apps/your-project/main*.js"],
    "limit": "300 kB"
  }
]

Read more on the size-limit CLI configuration options here.

Additional executor will be added to the target project.json config:

{
  "size-limit": {
    "executor": "nx-size-limit:size-limit"
  }
}

Statoscope bundle analysis

Set why:true for forwarding the '--why' flag to the size-limit CLI.

{
  "size-limit": {
    "executor": "nx-size-limit:size-limit",
    "options": {
      "why": true
    }
  }
}

It will produce a nice report helps to analyze the bundle as specified on this section.

You will need to install @size-limit/esbuild-why or @size-limit/webpack-why depends on which bundler you are using (default is esbuild).

Run a limit check

nx run your-project:size-limit

CI

This is an initial suggestion, iterate over the distributed projects and run size-limit.

- name: Get list of affected apps
  run: |
    APPS=( $(ls -1d dist/apps/*/ | xargs -n 1 basename) )
    echo "APPS=$APPS" >> $GITHUB_ENV

- name: Run NX command per app
  env:
    APPS: ${{ env.APPS }}
  run: |
    for app in $APPS; do
      npx nx run $app:size-limit
    done

Credits

This plugin wouldn't be possible without the great teams behind these projects:

• size-limit - Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.
• Nrwl - The team behind Nx

Please show them your support! ❤️