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.
npm install -D nx-size-limit
npm install -D size-limit @size-limit/preset-app
** Requires a prior build of the target project.
nx g nx-size-limit:add --name=your-project
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"
}
}
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).
nx run your-project:size-limit
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
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! ❤️