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`	`string`	`'all'`	分析するペイロードのレベル。`'all'`、`'warning'`、または`'error'`を指定できます。
`warningSize`	`number`	`1024 * 50`	警告をトリガーするペイロードのサイズ。
`errorSize`	`number`	`1024 * 100`	エラーをトリガーするペイロードのサイズ。
`failOnError`	`boolean`	`false`	`true`の場合、ペイロードが大きすぎるとビルドが失敗します。