Link preload 与 modulepreload 关键资源提示治理实践

核心价值为首屏关键样式与模块提前建立获取通道，提高渲染与执行的确定性。与 103 Early Hints 协同，在最终响应前并行准备资源。App Router 注入// app/head.tsx export default function Head() { return ( <> <link rel="preload" href="https://cdn.example.com/app.css" as="style" /> <link rel="modulepreload" href="https://cdn.example.com/app.mjs" crossOrigin="anonymous" /> </> ) } 治理建议`preload` 仅用于确定会被使用的关键资源；避免过度预加载浪费带宽。`modulepreload` 适用于 ESM 模块与其依赖图；跨域时显式 `crossorigin`。与 `fetchpriority`、`preconnect`、`dns-prefetch` 协同形成稳定资源获取策略。结论合理使用 `preload` 与 `modulepreload` 并在 App Router 中统一注入，能显著改善首屏与交互的启动时间，且实现简洁可控。