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 過大，構建將失敗。