Nuxt Payload Analyzer
一個 Nuxt 模組，用於分析您的 Nuxt 應用程式中的 payload 大小。
當您產生 Nuxt 應用程式時，來自 useFetch 和 useAsyncData 的 payload 會被提取到 JSON 檔案中，這些檔案會在運行時被提取。如果您忘記過濾這些函式的輸出，您可能會產生巨大的 payload，這會減慢您的應用程式速度。例如，如果您使用 Nuxt Content 來產生文章列表，您可能會忘記從輸出中移除文章的 body（未使用）。您很容易獲得超過 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
準備 repo
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
請不要 commit 在 playground 資料夾中的變更。