Nuxt ペイロードアナライザー
Nuxt アプリケーションのペイロードサイズを分析するための Nuxt モジュール。
Nuxt アプリケーションを生成すると、useFetch および useAsyncData からのペイロードは、実行時にフェッチされる JSON ファイルとして抽出されます。これらの関数の出力をフィルター処理し忘れると、アプリケーションの速度を低下させる巨大なペイロードが生成される可能性があります。たとえば、Nuxt Content を使用して記事のリストを生成する場合、使用されない記事の本文を出力から削除するのを忘れることがあります。これにより、簡単に 150kB を超えるペイロードになる可能性があります。
このモジュールは、これらのミスを検出するのに役立ちます。
機能
- ビルド時に Nuxt アプリケーションのペイロードサイズを分析
- ペイロードが大きすぎる場合はビルドを拒否
- CLI を使用してペイロードをローカルで分析
- Nuxt アプリケーションのペイロードレポートを印刷
使用方法
このモジュールは 2 つの方法で使用できます。
- Nuxt モジュールとして
- CLI として
Nuxt モジュール
モジュールのインストール
npm install nuxt-payload-analyzer
nuxt.config.ts にモジュールを追加します
export default defineNuxtConfig({
modules: [
'nuxt-payload-analyzer'
]
})
準備完了です！モジュールはビルド後にペイロードを分析し、レポートを印刷します。アプリケーションを生成してみてください。以下のような出力が表示されるはずです。
ℹ 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' | 分析するペイロードのレベル。'all'、'warning'、または 'error' を指定できます。 |
warningSize | number | 1024 * 50 | 警告をトリガーするペイロードのサイズ。 |
errorSize | number | 1024 * 100 | エラーをトリガーするペイロードのサイズ。 |
failOnError | ブール値 | false | true の場合、ペイロードが大きすぎるとビルドは失敗します。 |
CLI のオプションのリストを取得するには、npx nuxt-payload-analyzer@latest --help を使用できます。
開発
依存関係をインストール
pnpm install
リポジトリを準備
pnpm run dev:prepare
スタブをビルド
pnpm run build:stub
playground フォルダーの Nuxt アプリを使用してモジュールを試す
pnpm run dev
playground Nuxt アプリを生成することもできます
pnpm run dev:generate
playground フォルダーでCLIを試す
pnpm run nuxt-payload-analyzer
playground フォルダーの変更はコミットしないでください。