mcpField
A
analyze-bundle

analyze-bundle

github.com/vercel-labs开发1.6k215 次安装2 天前更新
代码仓库

关于 analyze-bundle

analyze-bundle 是将 Next.js bundle analyzer 的 `.data` 文件转换为可用 grep 和 jq 检索的 NDJSON 的工作流。它提供路由、源码、输出文件和模块依赖数据,便于确定分析重点。

主要功能

  1. 01将分析数据转换为 NDJSON
  2. 02查看路由级摘要
  3. 03查找大型源码和输出文件
  4. 04探索模块依赖边

适用场景

  1. 01确定 bundle 优化的路由优先级
  2. 02定位大型客户端 JavaScript 源码
  3. 03追踪模块间依赖

安装

复制下面的命令,在终端中运行。

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

安装后在 Claude Code 中输入/analyze-bundle确认已加载。

详细介绍

analyze-to-ndjson

将 Next.js bundle analyzer 的二进制 .data 文件转换为便于 grep/jq 查询的 NDJSON。

分析产物

此工作流会预先生成分析产物,存放在:

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

重点阅读这些文件,并根据其中的证据确定改进的优先级。

输出文件

文件内容
modules.ndjson全局模块注册表(id、ident、path)
module_edges.ndjson模块依赖图(from、to、kind:sync/async)
sources.ndjson各路由的源代码树,包含大小和环境标记
chunk_parts.ndjson细粒度大小数据:每个(源文件、输出文件)对占一行
output_files.ndjson各路由的输出文件及其汇总大小
routes.ndjson路由级摘要

浏览输出

路由概览
jq -s 'sort_by(-.total_compressed_size)' .next/diagnostics/analyze/ndjson/routes.ndjson
查找较大的源文件
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
客户端 JavaScript
grep '"client":true' .next/diagnostics/analyze/ndjson/sources.ndjson \
  | grep '"js":true' \
  | jq -s 'sort_by(-.compressed_size) | .[0:10] | .[] | {full_path, compressed_size}'
模块依赖
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}'
路由的输出文件
grep '"route":"/"' .next/diagnostics/analyze/ndjson/output_files.ndjson \
  | jq -s 'sort_by(-.total_compressed_size) | .[0:10] | .[] | {filename, total_compressed_size, num_parts}'
路由的目录树
grep '"route":"/"' .next/diagnostics/analyze/ndjson/sources.ndjson \
  | jq 'select(.parent_id == null)'

评论

支持 Markdown