analyze-bundle

analyze-to-ndjson

Next.js バンドルアナライザーのバイナリ .data ファイルを、grepやjqで扱いやすいNDJSONに変換します。

解析アーティファクト

このワークフローでは、次の場所にアナライザーアーティファクトを事前生成します。

• .next/diagnostics/analyze/ndjson/routes.ndjson
• .next/diagnostics/analyze/ndjson/sources.ndjson
• .next/diagnostics/analyze/ndjson/output_files.ndjson
• .next/diagnostics/analyze/ndjson/module_edges.ndjson
• .next/diagnostics/analyze/ndjson/modules.ndjson

これらのファイルを読み込み、そこにある根拠を使って変更の優先順位を決めてください。

出力ファイル

ファイル	内容
modules.ndjson	グローバルなモジュールレジストリ（id、ident、path）
module_edges.ndjson	モジュール依存関係グラフ（from、to、kind：sync/async）
sources.ndjson	サイズと環境フラグを含む、ルートごとのソースツリー
chunk_parts.ndjson	詳細なサイズデータ：ソースとoutput_fileのペアごとに1行
output_files.ndjson	サイズを集計した、ルートごとの出力ファイル
routes.ndjson	ルートレベルの概要

出力の閲覧

ルートの概要

jq -s 'sort_by(-.total_compressed_size)' .next/diagnostics/analyze/ndjson/routes.ndjson

サイズの大きなソースを探す

jq -s '
  group_by(.full_path)
  | map(max_by(.compressed_size))
  | sort_by(-.compressed_size)
  | .[0:10]
  | .[] | {full_path, compressed_size, size, route}
' .next/diagnostics/analyze/ndjson/sources.ndjson

クライアント側のJavaScript

grep '"client":true' .next/diagnostics/analyze/ndjson/sources.ndjson \
  | grep '"js":true' \
  | jq -s 'sort_by(-.compressed_size) | .[0:10] | .[] | {full_path, compressed_size}'

モジュールの依存関係

grep '"from":42,' .next/diagnostics/analyze/ndjson/module_edges.ndjson | jq .to
grep '"to":42,' .next/diagnostics/analyze/ndjson/module_edges.ndjson | jq .from
grep 'react-dom' .next/diagnostics/analyze/ndjson/modules.ndjson | jq '{id, path}'

ルートの出力ファイル

grep '"route":"/"' .next/diagnostics/analyze/ndjson/output_files.ndjson \
  | jq -s 'sort_by(-.total_compressed_size) | .[0:10] | .[] | {filename, total_compressed_size, num_parts}'

ルートのディレクトリツリー

grep '"route":"/"' .next/diagnostics/analyze/ndjson/sources.ndjson \
  | jq 'select(.parent_id == null)'