SuperAPI AI 工具集

next-browser-initial-load-optimizer

前端与建站

查看项目

更新于 10-16 02:44

技能介绍

用途

该技能用于审计和减少 Next.js 应用的浏览器初始加载工作量。适用场景包括:路由启动缓慢、客户端包体积过大、浏览器依赖重复,以及可以延迟到用户交互后再加载的功能。

主要能力

技能提供两种模式:

  • 审计模式(默认):生成分析器产物并报告候选优化点,保持应用源码、依赖和锁文件不变。
  • 修复模式:需要明确请求才会修改应用。在改变可见行为、时序、兼容性或信任边界之前需要先询问。

技能还提示了相关技能的边界:路由的静态 App Shell 应使用 next-cache-components-optimizer;导航预取工作应使用 next-partial-prefetching-optimizer。

使用方式

工作流程分为六个步骤:

  1. 设定范围:选择路由和审计或修复模式,记录路由、模式和预期行为。

  2. 捕获并导出基线:在应用目录下使用包管理器运行命令。先阅读 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 也产生可重放数据。

  3. 解读证据:从应用安装的 Next.js 解析 schema,使用其 Node 启动器:

    pnpm exec node -p "require.resolve('next/analyze/graph-v1.schema.json')"
    

    阅读其描述以了解记录含义、连接、归因和覆盖范围。使用 gzip -dc 流式解压到面向行的分析脚本,而不是将整个转储加载到上下文中。使用 schema 解读所选路由的客户端/服务器贡献并选择指标。

  4. 解释候选:检查实际项目源码和确切的导入者。从命名路由开始,或按归因大小、重复、可能的运行时成本、交互前需求和正确性风险对限定范围的客户端输出贡献进行排序。

    社区 → 最小割流程:对于寻求跨多个功能或大型贡献者列表机会的广泛审计,在初始排序后运行社区检测 → 目标选择 → 有向最小割 → 源码验证。在构建图或运行求解器之前阅读 Graph 方法。

    图证据清单:在提出编辑之前,为每个候选记录以下项目:范围、覆盖范围、归因、可达性、源码检查、方法。

  5. 验证单次改动(仅修复模式):进行一个小的、内聚的改动。用新名称捕获/导出后快照,并与基线比较相同路由、输出类别和指标。运行相关行为测试和类型检查;在运行中的应用中验证编辑时使用 next-dev-loop。

  6. 报告并停止:审计报告候选;修复报告接受的编辑以及任何回退或未验证的尝试。包括快照名称、限定范围的归因/增量、确切的源码/导入者、行为检查结果和阻碍因素。

适用场景

  • 路由启动缓慢
  • 客户端包体积过大
  • 浏览器依赖重复
  • 可延迟到交互后再加载的功能

限制

  • 审计模式不修改应用源码、依赖和锁文件。
  • 修复模式需要明确请求,且在改变可见行为、时序、兼容性或信任边界之前需要先询问。
  • 如果代理沙箱阻止 TCP 端口绑定,必须在沙箱外运行捕获命令。
  • 导出一次验证一个路由,失败可能留下部分归档。
  • 关于观察到的浏览器请求、时序或传输节省的声明需要单独的证据。
  • 图证据建立索引可达性;后快照验证发出的输出和归因变化。
  • 启发式方法应标记为启发式,受证据缺口影响的结论应加以限定。