analyze-bundle

bởi vercel

Chuyển đổi dữ liệu phân tích bundle Next.js sang NDJSON và khám phá nó

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

Thêm skills từ vercel

benchmark-sandbox
vercel
Chạy các kịch bản đánh giá vercel-plugin trong Vercel Sandboxes thay vì các bảng WezTerm cục bộ. Cung cấp các microVM tạm thời với Claude Code và plugin được cài đặt sẵn,…
official
emil-design-eng
vercel
Kỹ năng này mã hóa triết lý của Emil Kowalski về trau chuốt giao diện người dùng, thiết kế thành phần, quyết định hoạt ảnh và những chi tiết vô hình giúp phần mềm mang lại cảm giác tuyệt vời.
official
vercel-react-best-practices
vercel
Hướng dẫn tối ưu hiệu suất React và Next.js từ Vercel Engineering. Kỹ năng này nên được sử dụng khi viết, xem xét hoặc tái cấu trúc mã React/Next.js…
official
vercel-react-best-practices
vercel
Hướng dẫn tối ưu hiệu suất React và Next.js từ Vercel Engineering. Kỹ năng này nên được sử dụng khi viết, xem xét hoặc tái cấu trúc mã React/Next.js…
official
write-guide
vercel
Tạo một hướng dẫn kỹ thuật dạy một trường hợp sử dụng thực tế thông qua các ví dụ tiến dần. Các khái niệm chỉ được giới thiệu khi người đọc cần đến chúng.
official
release
vercel
Phát hành vercel-plugin — chạy các cổng, tăng phiên bản, tạo tạo phẩm, commit và push. Sử dụng khi được yêu cầu "phát hành", "ship", "tăng và push", hoặc "cắt một bản phát hành".
official
deepsec
vercel
Chạy DeepSec trên bản checkout dự án Vercel từ dev3000. Sử dụng để thiết lập DeepSec một chạm, khởi tạo ngữ cảnh dự án, xử lý lần đầu có giới hạn, và…
official
backport-pr
vercel
Backport một pull request Next.js đã được merge từ canary sang một nhánh phát hành trước đó như next-16-2. Sử dụng khi người dùng yêu cầu backport, cherry-pick, hoặc mở một…
official