Nuxt Payload Analyzer
A Nuxt module used to analyze payload size in your Nuxt application.
When you generate a Nuxt application, payloads from useFetch and useAsyncData are extracted into JSON files that are fetched at runtime. If you forget to filter the output of these functions, you could generate an enormous payload that will slow down your application. For example, if you use Nuxt Content to generate a list of articles, you could forget to remove the body of the articles, which is not used, from the output. You can easily get a payload of more than 150kB.
This module will help you to detect these mistakes.
Features
- Analyze size of payloads in your Nuxt application during build time
- Reject a build if a payload is too big
- Use CLI to analyze payloads locally
- Print a report of payloads in your Nuxt application
Usage
You can use this module in two ways:
- As a Nuxt module
- As a CLI
Nuxt module
Install the module
npm install nuxt-payload-analyzer
Add the module to your nuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-payload-analyzer'
]
})
You're good to go! The module will analyze your payloads after build time and print a report. Try to generate your application and you should see something like this:
ℹ Nuxt Payload Analyzer
├─ about
│ └─ _payload.json (117.3 KB) [TOO BIG]
└─ _payload.json (62 B)
✔ Payloads analyzed
CLI
Simply use npx
npx nuxt-payload-analyzer@latest
That's it. The CLI will print you a report similar to the one above.
You can specify the directory of your Nuxt application with the --cwd option.
npx nuxt-payload-analyzer@latest --cwd ./my-nuxt-app
Options
The following options are similar for the Nuxt module and the CLI. For the module, you must use the payloadAnalyzer key in your nuxt.config.ts.
| Option | Type | Default | Description |
|---|---|---|---|
payloadSizeLevel | string | 'all' | The level of payload to analyze. Can be 'all', 'warning' or 'error'. |
warningSize | number | 1024 * 50 | The size of payload that will trigger a warning. |
errorSize | number | 1024 * 100 | The size of payload that will trigger an error. |
failOnError | boolean | false | If true, the build will fail if a payload is too big. |
You can use npx nuxt-payload-analyzer@latest --help to get the list of options for the CLI.
Development
Install dependencies
pnpm install
Prepare the repo
pnpm run dev:prepare
Build Stub
pnpm run build:stub
Play with module using the Nuxt app in the playground folder
pnpm run dev
You can also generate the playground Nuxt app
pnpm run dev:generate
Play with the CLI in the playground folder
pnpm run nuxt-payload-analyzer
Please, do not commit change in the playground folder.