Nuxt Payload 分析器
一个 Nuxt 模块，用于分析您的 Nuxt 应用程序中的 payload 大小。
当您生成 Nuxt 应用程序时，来自 useFetch 和 useAsyncData 的 payload 会被提取到 JSON 文件中，这些文件在运行时获取。如果您忘记过滤这些函数的输出，您可能会生成一个巨大的 payload，从而减慢您的应用程序速度。例如，如果您使用 Nuxt Content 生成文章列表，您可能会忘记从输出中删除文章的正文（未使用）。您很容易获得超过 150kB 的 payload。
此模块将帮助您检测这些错误。
功能特性
- 在构建时分析您的 Nuxt 应用程序中的 payload 大小
- 如果 payload 太大，则拒绝构建
- 使用 CLI 在本地分析 payload
- 打印您的 Nuxt 应用程序中 payload 的报告
用法
您可以通过两种方式使用此模块
- 作为 Nuxt 模块
- 作为 CLI
Nuxt 模块
安装模块
npm install nuxt-payload-analyzer
将模块添加到您的 nuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-payload-analyzer'
]
})
您已准备就绪！ 该模块将在构建后分析您的 payload 并打印报告。尝试生成您的应用程序，您应该看到类似这样的内容
ℹ Nuxt Payload Analyzer
├─ about
│ └─ _payload.json (117.3 KB) [TOO BIG]
└─ _payload.json (62 B)
✔ Payloads analyzed
CLI
只需使用 npx
npx nuxt-payload-analyzer@latest
就是这样。 CLI 将打印给您一份类似于上面报告的报告。
您可以使用 --cwd 选项指定您的 Nuxt 应用程序的目录。
npx nuxt-payload-analyzer@latest --cwd ./my-nuxt-app
选项
以下选项对于 Nuxt 模块和 CLI 类似。对于模块，您必须在 nuxt.config.ts 中使用 payloadAnalyzer 键。
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
payloadSizeLevel | string | 'all' | 要分析的 payload 级别。可以是 'all'、'warning' 或 'error'。 |
warningSize | number | 1024 * 50 | 将触发警告的 payload 大小。 |
errorSize | number | 1024 * 100 | 将触发错误的 payload 大小。 |
failOnError | boolean | false | 如果为 true，则当 payload 太大时，构建将失败。 |
您可以使用 npx nuxt-payload-analyzer@latest --help 获取 CLI 的选项列表。
开发
安装依赖
pnpm install
准备仓库
pnpm run dev:prepare
构建 Stub
pnpm run build:stub
在 playground 文件夹中使用 Nuxt 应用程序体验 模块
pnpm run dev
您还可以生成 playground Nuxt 应用程序
pnpm run dev:generate
在 playground 文件夹中体验 CLI
pnpm run nuxt-payload-analyzer
请不要提交 playground 文件夹中的更改。