SuperAPI AI 工具集

next-partial-prefetching-adoption

前端与建站

查看项目

更新于 10-16 00:21

技能介绍

用途:在 Next.js 应用中启用 Partial Prefetching,并沿应用逐个导航,确保每个链接都能复用共享的 App Shell。启用后,指向某路由的链接会预取一个共享 App Shell;当链接使用 prefetch={true} 时,还可解析已缓存的 URL 专属内容。该技能负责编排整个工作顺序,逐条 insight 的修复方法见开发浮层修复卡片及其文档页;《Adopting Partial Prefetching》指南是相关概念的权威参考。

主要能力:审计 <Link prefetch={true}> 导航、捕获旧版基线、逐个目标路由采用预取、最后开启全局开关并移除冗余配置。测试驱动的保留验证基于生产模式构建与 instant(),不需要开发服务器;开发 insights 仅出现在 next dev 的开发浮层 Insights 标签中。

必要用法:需先采用 Cache Components(cacheComponents: true)且构建通过,并需要 Next.js 16.3 或更高版本、可驱动的浏览器、可运行的应用。可用 npx @next/codemod@canary remove-partial-prefetch ./app 移除冗余的 export const prefetch = 'partial'(src 项目用 ./src/app)。优先使用 npx skills add https://github.com/vercel/next.js/tree/canary/skills/next-dev-loop 驱动导航与读取浮层。

限制:保留验证必须在生产模式构建下由 instant() 套件判定;自动预取仅在生产环境运行。开发 insights 只在 next dev 中出现且为非阻塞信号,阻塞性预渲染错误需先解决。测试依赖来自 @next/playwright 包,而非 next/experimental/testmode/playwright。详情以官方文档为准。