用途:在 Next.js 应用中启用并落地 Partial Prefetching,让每个 <Link> 预取共享的 App Shell,而不是旧式全量预取,并处理由此暴露的洞察项。
主要能力与流程:
- 开启前审计:用 rg -n '\bprefetch\b|router.prefetch' -g '.tsx' -g '.jsx' 找出所有预取点,保留 <Link prefetch={true}> 与裸 prop,按引导表逐路由添加 export const prefetch = 'partial',并保留原有预取所交付的内容。
- 启用全局标志:在 next.config.ts 设置 partialPrefetching: true,然后用 npx @next/codemod@latest remove-partial-prefetch ./app 移除多余的 prefetch = 'partial'。
- 改造后扫描 URL 数据洞察,按功能逐一完成,结构问题用 <Suspense> 边界修复。
- 验证:在 next dev 中通过点击导航触发洞察,在生产 next build/next start 下确认预取(预取仅在生产生效)。
使用方式与限制:需 Cache Components 开启(cacheComponents: true),Next.js 16.3 及以上;洞察只在 next dev 的 dev overlay Insights 标签(琥珀色、非阻塞)中出现,需可驱动浏览器,建议先安装 next-dev-loop(npx skills add https://github.com/vercel/next.js/tree/canary/skills/next-dev-loop)。洞察不阻塞构建,空扫描属正常;无浏览器时可做静态改造,把实时校验留作交接。指南离线副本位于 node_modules/next/dist/docs/。