nuxt-payload-analyzer

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.

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.

License

MIT License