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

benchmark-sandbox
vercel
Vercel Sandboxes में vercel-plugin eval परिदृश्य चलाएँ, स्थानीय WezTerm पैनलों के बजाय। Claude Code + प्लगइन पूर्व-स्थापित के साथ अस्थायी microVMs प्रदान करता है,…
official
emil-design-eng
vercel
यह कौशल एमिल कोवाल्स्की के UI पॉलिश, कंपोनेंट डिज़ाइन, एनिमेशन निर्णयों और उन अदृश्य विवरणों पर दर्शन को एनकोड करता है जो सॉफ्टवेयर को शानदार महसूस कराते हैं।
official
vercel-react-best-practices
vercel
React और Next.js प्रदर्शन अनुकूलन दिशानिर्देश Vercel Engineering से। इस कौशल का उपयोग React/Next.js कोड लिखने, समीक्षा करने या रीफैक्टर करते समय किया जाना चाहिए…
official
vercel-react-best-practices
vercel
React और Next.js प्रदर्शन अनुकूलन दिशानिर्देश Vercel Engineering से। इस कौशल का उपयोग React/Next.js को लिखने, समीक्षा करने या रीफैक्टर करने के दौरान किया जाना चाहिए…
official
write-guide
vercel
एक तकनीकी गाइड तैयार करें जो प्रगतिशील उदाहरणों के माध्यम से एक वास्तविक दुनिया के उपयोग के मामले को सिखाता है। अवधारणाओं को केवल तब पेश किया जाता है जब पाठक को उनकी आवश्यकता होती है।
official
release
vercel
वर्सेल-प्लगइन जारी करें — गेट्स चलाएं, संस्करण बढ़ाएं, आर्टिफैक्ट्स उत्पन्न करें, कमिट करें और पुश करें। जब "रिलीज़ करें", "शिप करें", "बंप और पुश करें" या "कट अ रिलीज़" कहा जाए तो इसका उपयोग करें।
official
deepsec
vercel
dev3000 से Vercel प्रोजेक्ट चेकआउट पर DeepSec चलाएँ। एक-क्लिक DeepSec सेटअप, प्रोजेक्ट संदर्भ बूटस्ट्रैपिंग, सीमित प्रथम-पास प्रसंस्करण, और… के लिए उपयोग करें।
official
backport-pr
vercel
किसी मर्ज किए गए Next.js पुल रिक्वेस्ट को canary से पिछली रिलीज़ ब्रांच जैसे next-16-2 पर बैकपोर्ट करें। तब उपयोग करें जब उपयोगकर्ता बैकपोर्ट, चेरी-पिक, या खोलने के लिए कहे…
official