用途
该技能用于审计和减少 Next.js 应用的浏览器初始加载工作量。适用场景包括:路由启动缓慢、客户端包体积过大、浏览器依赖重复,以及可以延迟到用户交互后再加载的功能。
主要能力
技能提供两种模式:
- 审计模式(默认):生成分析器产物并报告候选优化点,保持应用源码、依赖和锁文件不变。
- 修复模式:需要明确请求才会修改应用。在改变可见行为、时序、兼容性或信任边界之前需要先询问。
技能还提示了相关技能的边界:路由的静态 App Shell 应使用 next-cache-components-optimizer;导航预取工作应使用 next-partial-prefetching-optimizer。
使用方式
工作流程分为六个步骤:
-
设定范围:选择路由和审计或修复模式,记录路由、模式和预期行为。
-
捕获并导出基线:在应用目录下使用包管理器运行命令。先阅读
next analyze --help和next analyze export --help了解捕获和重放选项。复用已保存的快照,或先用独特名称捕获,再以默认压缩级别通过 gzip 导出。保持前后.jsonl.gz文件分开。沙箱要求:如果代理沙箱阻止 TCP 端口绑定(如 Codex),必须在沙箱外运行
next analyze --output捕获。示例命令:
set -o pipefail pnpm exec next analyze --output --snapshot 'audit-before-unique-1' pnpm exec next analyze export --snapshot 'audit-before-unique-1' --route '/dashboard' | gzip > /tmp/analyze-dashboard-before.jsonl.gz--output构建并保存二进制/UI 产物但不提供服务。next analyze export读取已保存快照而不构建;stdout 每行一条类型化 JSON 记录,错误输出到 stderr。路由过滤器保留整个应用的模块图,因此需要在下一步限定范围。对于自定义 distDir,使用
--dist-dir <configured-directory>重放。--snapshot <name>选择保留的名称;省略则选择最新快照。捕获时省略会生成唯一时间戳名称,复用显式名称会替换现有捕获。使用不同的前后名称以保留两个基线。交互式探索时,不带--output捕获以提供 UI;next build --analyze也产生可重放数据。 -
解读证据:从应用安装的 Next.js 解析 schema,使用其 Node 启动器:
pnpm exec node -p "require.resolve('next/analyze/graph-v1.schema.json')"阅读其描述以了解记录含义、连接、归因和覆盖范围。使用
gzip -dc流式解压到面向行的分析脚本,而不是将整个转储加载到上下文中。使用 schema 解读所选路由的客户端/服务器贡献并选择指标。 -
解释候选:检查实际项目源码和确切的导入者。从命名路由开始,或按归因大小、重复、可能的运行时成本、交互前需求和正确性风险对限定范围的客户端输出贡献进行排序。
社区 → 最小割流程:对于寻求跨多个功能或大型贡献者列表机会的广泛审计,在初始排序后运行社区检测 → 目标选择 → 有向最小割 → 源码验证。在构建图或运行求解器之前阅读 Graph 方法。
图证据清单:在提出编辑之前,为每个候选记录以下项目:范围、覆盖范围、归因、可达性、源码检查、方法。
-
验证单次改动(仅修复模式):进行一个小的、内聚的改动。用新名称捕获/导出后快照,并与基线比较相同路由、输出类别和指标。运行相关行为测试和类型检查;在运行中的应用中验证编辑时使用 next-dev-loop。
-
报告并停止:审计报告候选;修复报告接受的编辑以及任何回退或未验证的尝试。包括快照名称、限定范围的归因/增量、确切的源码/导入者、行为检查结果和阻碍因素。
适用场景
- 路由启动缓慢
- 客户端包体积过大
- 浏览器依赖重复
- 可延迟到交互后再加载的功能
限制
- 审计模式不修改应用源码、依赖和锁文件。
- 修复模式需要明确请求,且在改变可见行为、时序、兼容性或信任边界之前需要先询问。
- 如果代理沙箱阻止 TCP 端口绑定,必须在沙箱外运行捕获命令。
- 导出一次验证一个路由,失败可能留下部分归档。
- 关于观察到的浏览器请求、时序或传输节省的声明需要单独的证据。
- 图证据建立索引可达性;后快照验证发出的输出和归因变化。
- 启发式方法应标记为启发式,受证据缺口影响的结论应加以限定。