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 太大，建置將會失敗。 |
您可以使用 npx nuxt-payload-analyzer@latest --help 來取得 CLI 的選項列表。
開發
安裝依賴
pnpm install
準備儲存庫
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
請不要提交 playground 資料夾中的變更。