Next.js 15 Preconnect 与 DNS Prefetch 资源提示治理实践

核心价值`preconnect` 提前建立到第三方源的 TCP/TLS 与可选的 HTTP/2 会话，降低关键资源首字节等待。`dns-prefetch` 提前解析域名，适用于不需要立即建链的低成本优化。与 HTTP 103 Early Hints、Next.js App Router 配合，实现更稳健的首屏性能。App Router 注入// app/head.tsx export default function Head() { return ( <> <link rel="preconnect" href="https://cdn.example.com" crossOrigin="anonymous" /> <link rel="dns-prefetch" href="//cdn.example.com" /> <link rel="preconnect" href="https://fonts.example.com" crossOrigin="anonymous" /> <link rel="dns-prefetch" href="//fonts.example.com" /> </> ) } 要点跨域预连接应显式设置 `crossorigin`（或 `crossOrigin`）以允许凭据协商；若仅匿名资源建议使用 `anonymous`。针对关键第三方源使用 `preconnect`，对潜在资源使用 `dns-prefetch` 控制成本。与 `link rel="preload"`/`fetchpriority` 配合用于确定性关键资源（如首屏字体/样式）；非关键资源避免滥用。Early Hints 协同服务端返回 103 Early Hints 携带 `link: <...>; rel=preconnect` 指令，浏览器可在最终响应前并行建链。与已配置的 `head.tsx` 链接提示互补，确保在不同传输阶段都有机会提前准备连接。验证与治理使用网络面板确认 `Preconnect` 阶段与握手耗时下降；避免对过多域名预连接造成资源浪费。对无实际后续请求的域名移除预连接；优先聚合第三方资源域。结论通过在 App Router 中注入 `preconnect` 与 `dns-prefetch`，并与 Early Hints、预加载策略协同，可在多源依赖场景显著降低关键资源等待与首包延迟。