analyze-bundle

द्वारा vercel

Next.js बंडल विश्लेषक डेटा को NDJSON में बदलें और इसका अन्वेषण करें

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 की और Skills

vercel
vercel
स्थानीय विकास और परीक्षण के लिए अनुकरणित Vercel REST API। उपयोग तब करें जब उपयोगकर्ता को स्थानीय रूप से Vercel API एंडपॉइंट्स के साथ इंटरैक्ट करने, Vercel इंटीग्रेशन का परीक्षण करने की आवश्यकता हो,…
cron-jobs
vercel
Vercel Cron Jobs कॉन्फ़िगरेशन और सर्वोत्तम अभ्यास। vercel.json में शेड्यूल किए गए कार्यों को जोड़ने, संपादित करने या डीबग करने पर उपयोग करें।
codegen
vercel
json-render के लिए कोड जनरेशन उपयोगिताएँ। UI स्पेक्स से कोड जनरेट करते समय, कस्टम कोड एक्सपोर्टर बनाते समय, स्पेक्स को ट्रैवर्स करते समय, या प्रॉप्स को सीरियलाइज़ करते समय उपयोग करें…
next-best-practice
vercel
Next.js सर्वोत्तम अभ्यास - फ़ाइल परंपराएँ, RSC सीमाएँ, डेटा पैटर्न, async API, मेटाडेटा, त्रुटि प्रबंधन, रूट हैंडलर, इमेज/फ़ॉन्ट अनुकूलन,…
benchmark-sandbox
vercel
Vercel Sandboxes में vercel-plugin eval परिदृश्य चलाएँ, स्थानीय WezTerm पैनलों के बजाय। Claude Code + प्लगइन पूर्व-स्थापित के साथ अस्थायी microVMs प्रदान करता है,…
write-guide
vercel
एक तकनीकी गाइड तैयार करें जो प्रगतिशील उदाहरणों के माध्यम से एक वास्तविक दुनिया के उपयोग के मामले को सिखाता है। अवधारणाओं को केवल तब पेश किया जाता है जब पाठक को उनकी आवश्यकता होती है।
benchmark-testing
vercel
बेंचमार्क परीक्षण परियोजनाएँ बनाएँ और लॉन्च करें ताकि वास्तविक परिदृश्यों में vercel-plugin कौशल इंजेक्शन का परीक्षण किया जा सके। पृथक निर्देशिकाएँ सेट करता है, इंस्टॉल करता है…
ai-gateway
vercel
Vercel AI गेटवे विशेषज्ञ मार्गदर्शन। मॉडल रूटिंग, प्रदाता फेलओवर, लागत ट्रैकिंग, या एकीकृत माध्यम से कई AI प्रदाताओं के प्रबंधन को कॉन्फ़िगर करते समय उपयोग करें…