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 | 字符串 | 'all' | 要分析的 payload 级别。可以是 'all'， 'warning' 或 'error'。 |
warningSize | 数字 | 1024 * 50 | 触发警告的 payload 大小。 |
errorSize | 数字 | 1024 * 100 | 触发错误的 payload 大小。 |
failOnError | 布尔值 | false | 如果为 true，则当 payload 太大时，构建将失败。 |
你可以使用 npx nuxt-payload-analyzer@latest --help 来获取 CLI 的选项列表。
开发
安装依赖
pnpm install
准备仓库
pnpm run dev:prepare
构建存根
pnpm run build:stub
使用 playground 文件夹中的 Nuxt 应用程序体验 模块
pnpm run dev
你也可以生成 playground Nuxt 应用程序
pnpm run dev:generate
在 playground 文件夹中体验 CLI
pnpm run nuxt-payload-analyzer
请不要提交 playground 文件夹中的更改。