nuxt-payload-analyzer

分析 Nuxt Payload 大小

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 大小。
`遇到错误时失败`	`boolean`	`false`	如果为 `true`，则如果 payload 过大，构建将失败。