analyze-bundle

โดย vercel

แปลงข้อมูล Next.js bundle analyzer เป็น 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)'

Skills เพิ่มเติมจาก vercel

vercel
vercel
Emulated Vercel REST API สำหรับการพัฒนาและทดสอบในเครื่อง ใช้เมื่อผู้ใช้ต้องการโต้ตอบกับปลายทาง API ของ Vercel ในเครื่อง ทดสอบการผสานรวมของ Vercel…
cron-jobs
vercel
การกำหนดค่าและแนวทางปฏิบัติที่ดีที่สุดสำหรับ Vercel Cron Jobs ใช้เมื่อเพิ่ม แก้ไข หรือดีบักงานที่กำหนดเวลาไว้ใน vercel.json
codegen
vercel
ยูทิลิตี้สำหรับการสร้างโค้ดสำหรับ json-render ใช้เมื่อสร้างโค้ดจากสเปก UI สร้างตัวส่งออกโค้ดแบบกำหนดเอง ตรวจสอบสเปก หรือจัดลำดับพร็อพสำหรับ...
next-best-practice
vercel
แนวทางปฏิบัติที่ดีที่สุดของ Next.js - ข้อตกลงไฟล์, ขอบเขต RSC, รูปแบบข้อมูล, API แบบอะซิงก์, เมทาดาตา, การจัดการข้อผิดพลาด, ตัวจัดการเส้นทาง, การปรับแต่งภาพ/ฟอนต์,…
benchmark-sandbox
vercel
เรียกใช้สถานการณ์ประเมินผลของ vercel-plugin ใน Vercel Sandboxes แทนแผง WezTerm ในเครื่อง จัดเตรียม microVM ชั่วคราวที่ติดตั้ง Claude Code และปลั๊กอินไว้ล่วงหน้า…
write-guide
vercel
ผลิตคู่มือทางเทคนิคที่สอนกรณีการใช้งานในโลกจริงผ่านตัวอย่างแบบค่อยเป็นค่อยไป แนวคิดจะถูกนำเสนอเมื่อผู้อ่านต้องการเท่านั้น
benchmark-testing
vercel
สร้างและเปิดตัวโครงการทดสอบเกณฑ์มาตรฐานเพื่อทดสอบการแทรกทักษะของ vercel-plugin ในสถานการณ์จริง ตั้งค่าไดเรกทอรีที่แยกออกจากกัน ติดตั้ง...
ai-gateway
vercel
คำแนะนำผู้เชี่ยวชาญ Vercel AI Gateway ใช้เมื่อกำหนดค่าเส้นทางโมเดล การสำรองผู้ให้บริการ การติดตามต้นทุน หรือการจัดการผู้ให้บริการ AI หลายรายผ่านระบบรวมศูนย์…