analyze-bundle

tarafından vercel

Next.js bundle analyzer verilerini NDJSON'a dönüştürün ve keşfedin

npx skills add https://github.com/vercel-labs/dev3000 --skill analyze-bundle

analyze-to-ndjson

Converts Next.js bundle analyzer binary .data files into grep/jq-friendly NDJSON.

Analyze artifacts

This workflow pre-generates analyzer artifacts in:

  • .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

Focus on reading these files and using their evidence to prioritize changes.

Output files

FileWhat's in it
modules.ndjsonGlobal module registry (id, ident, path)
module_edges.ndjsonModule dependency graph (from, to, kind: sync/async)
sources.ndjsonPer-route source tree with sizes and environment flags
chunk_parts.ndjsonGranular size data: one line per (source, output_file) pair
output_files.ndjsonPer-route output files with aggregated sizes
routes.ndjsonRoute-level summaries

Browsing the output

Route overview

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

Find large sources

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

Client-side JS

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

Module dependencies

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}'

Output files for a route

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

Directory tree for a route

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

vercel tarafından daha fazla skill

vercel
vercel
Yerel geliştirme ve test için öykünülmüş Vercel REST API'si. Kullanıcının Vercel API uç noktalarıyla yerel olarak etkileşime geçmesi, Vercel entegrasyonlarını test etmesi gerektiğinde kullanın,…
cron-jobs
vercel
Vercel Cron Jobs yapılandırması ve en iyi uygulamalar. vercel.json dosyasında zamanlanmış görevler eklerken, düzenlerken veya hata ayıklarken kullanın.
codegen
vercel
json-render için kod oluşturma yardımcıları. UI şartnamelerinden kod oluştururken, özel kod dışa aktarıcıları oluştururken, şartnameleri tararken veya özellikleri serileştirirken kullanın…
next-best-practice
vercel
Next.js en iyi uygulamaları - dosya kuralları, RSC sınırları, veri desenleri, async API'ler, meta veriler, hata yönetimi, rota işleyicileri, resim/yazı tipi optimizasyonu,…
benchmark-sandbox
vercel
Vercel Sandbox'larda vercel-plugin eval senaryolarını çalıştırır, yerel WezTerm panelleri yerine. Claude Code ve önceden yüklenmiş plugin ile geçici mikroVM'ler sağlar,…
write-guide
vercel
Gerçek dünya kullanım senaryosunu aşamalı örneklerle öğreten bir teknik rehber oluşturur. Kavramlar yalnızca okuyucunun ihtiyaç duyduğu anda tanıtılır.
benchmark-testing
vercel
Gerçekçi senaryolarda vercel-plugin beceri enjeksiyonunu test etmek için benchmark test projeleri oluşturup başlatır. İzole dizinler kurar, yükler…
ai-gateway
vercel
Vercel AI Gateway uzman rehberliği. Model yönlendirme, sağlayıcı yedekleme, maliyet takibi yapılandırırken veya birden fazla AI sağlayıcısını birleşik bir şekilde yönetirken kullanın…