Nuxt Payload 分析器

一个用于分析 Nuxt 应用程序中 payload 大小的 Nuxt 模块。

当您生成 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 太大，构建将失败。