Polar 前端实战用 React DOM Resource Hints 预加载关键资源缩短首屏加载时间【免费下载链接】polarPolar — A billing platform for the intelligence era项目地址: https://gitcode.com/GitHub_Trending/po/polar本篇技术指南以 Polar 仓库中 Vercel React Best Practices 技能库的rendering-resource-hints规则为骨架系统讲解 React DOM 的六大资源预加载 APIprefetchDNS、preconnect、preload、preloadModule、preinit、preinitModule的适用场景与源码级原理并结合 Polar Web 前端 的真实代码字体预加载、Sidebar 链接 prefetch 等展示落地方式。读完你可以在 Server Components、Layout 与导航组件中精准地为关键资源发起预取降低首屏与导航的感知延迟。规则出处Vercel React Best Practices 技能库本文对应规则位于 rendering-resource-hints.md属于 Vercel React Best Practices 技能库SKILL.md中第 6 类「Rendering Performance渲染性能」的规则之一影响等级为HIGH显著减少关键资源的加载时间。该技能库共 64 条规则、8 个优先级分类资源提示规则与同类性能规则配合使用效果最佳相关规则解决的核心问题规则文件rendering-resource-hints本文关键资源加载时序rules/rendering-resource-hints.mdbundle-preload基于用户意图预取重量级分包rules/bundle-preload.mdrendering-script-defer-async脚本加载不阻塞渲染rules/rendering-script-defer-async.mdserver-hoist-static-io静态 I/O 提升到模块级rules/server-hoist-static-io.md为什么需要资源提示先建连接再要资源浏览器的网络加载是分阶段的DNS 解析 → TCP 连接 → TLS 握手 → 发送请求 → 下载 → 解析执行。如果关键资源等到 HTML 解析到对应位置才被发现浏览器才从头开始这一链条首屏就会被「串行等待」拖慢。React DOM 的资源预加载 API 解决的就是这个时序问题——它们把「建立连接」和「取回资源」提前到浏览器解析 HTML 之前在 Server Components / 服务端渲染阶段调用API 生成的link relpreload、link relpreconnect等标签直接进入服务端输出的 HTML客户端还没收到 HTML 时预加载工作已经可以开始。这是规则文档强调的核心理由“start loading resources before the client even receives the HTML”在客户端收到 HTML 之前就开始加载资源。在客户端组件中调用React 会动态注入对应的link/script标签同样把加载时机提前到「真正需要」之前。因此这是一项声明式优化你在组件顶层调用一次React 负责去重同一资源只注入一次并渲染出正确的标签。六大 API 速览与逐项剖析规则文档给出的六个 API 构成了从「最轻的连接预热」到「最重的立即执行」的完整梯度API生成效果最佳使用场景prefetchDNS(href)link reldns-prefetch未来某刻会连的第三方域名只需提前解析 DNSpreconnect(href)link relpreconnect马上要发起请求的 API / CDN提前完成 DNS TCP TLSpreload(href, options)link relpreload当前页面就要用的关键资源字体、样式、图片、脚本preloadModule(href)link relmodulepreload很可能下一次导航就会用到的 JS 模块preinit(href, options)script/link relstylesheet必须最早执行/生效的样式或脚本会下载并求值preinitModule(href)script typemodule必须最早执行/生效的 ES Module连接预热prefetchDNS 与 preconnectimport { preconnect, prefetchDNS } from react-dom export default function App() { prefetchDNS(https://analytics.example.com) preconnect(https://api.example.com) return main{/* content */}/main }prefetchDNS只做 DNS 解析代价最低。适合「以后可能连但不确定」的域名例如埋点上报域名。preconnect把 DNS TCP TLS 全部提前做完浏览器拿到请求时可以直接发数据节省一次完整握手的往返RTT。适合确定马上要请求的 API 或 CDN 域名。一个实用的经验法则同一页面连接数有限preconnect只给「第一批请求就会打到的域名」其余用prefetchDNS兜底即可避免过度预热挤占连接与带宽。关键资源预取preload 与 preinitimport { preload, preinit } from react-dom export default function RootLayout({ children }) { // 预取字体文件 preload(/fonts/inter.woff2, { as: font, type: font/woff2, crossOrigin: anonymous, }) // 立即下载并应用关键样式 preinit(/styles/critical.css, { as: style }) return ( html body{children}/body /html ) }preload(href, options)告诉浏览器「这个资源我马上要用」。options中的as资源类型font、style、script、image等与typeMIME 类型必须与资源实际类型一致否则浏览器可能忽略该预取加载跨域字体等资源时需要crossOrigin。preinit(href, options)不仅下载还会立即求值/应用适合必须最早执行的「关键 CSS」或「关键脚本」。注意preinit语义更重只应在真正需要时使用。在 React Server Components 中调用preload效果最好API 调用发生在服务端渲染期间生成的link relpreload会输出到初始 HTML浏览器在解析 HTML 头部时就能并行启动下载。模块预取preloadModule 与 preinitModuleimport { preloadModule, preinitModule } from react-dom function Navigation() { const preloadDashboard () { preloadModule(/dashboard.js, { as: script }) } return ( nav a href/dashboard onMouseEnter{preloadDashboard} Dashboard /a /nav ) }preloadModule预取 ES Module生成modulepreload提示适用于按路由代码分割code splitting后的 JS 模块——例如用户悬停在导航链接上时预取目标路由的分包。preinitModule下载并立即执行 ES Module用于必须最早运行的关键模块。这个 onMouseEnter 预取模式与同技能库的 bundle-preload.md 规则思路一脉相承基于用户意图hover / focus提前加载重量级分包把等待时间藏进「用户思考的间隙」。何时用哪个场景对照表规则文档给出的决策表是实战中最常用的速查工具API使用场景prefetchDNS未来会连的第三方域名preconnect马上要请求的 API 或 CDNpreload当前页面必需的关键资源preloadModule可能的下一次导航所需的 JS 模块preinit必须最早执行/生效的样式或脚本preinitModule必须最早执行/生效的 ES Module判断顺序建议当前页马上用 →preload下一页可能用 →preloadModule必须最早执行 →preinit系连接未建立 →preconnect/prefetchDNS。Polar 仓库中的真实落地案例一Layout 中预加载全套品牌字体Polar 的主站根布局 clients/apps/web/src/app/(main)/layout.tsx/layout.tsx#L74-L151) 是一个典型实践在服务端 Layout 中为全套字体资源声明relpreload。从源码可见Polar 为 9 个字体文件Inter-Light/Regular/Medium/SemiBold、InterDisplay系列、Louize-Italic、GeistMono-Variable逐一声明link relpreload href/fonts/Inter-Regular.woff2 asfont typefont/woff2 crossOrigin /每个声明都带上了asfont与typefont/woff2这正是preload选项as/type/crossOrigin在原生 HTML 层面的等价写法验证了规则文档中preload(href, { as: font, type: font/woff2, crossOrigin: anonymous })的参数语义crossOrigin属性是字体预加载的必备项font-face资源默认以 CORS 模式请求缺失该属性会导致预取结果无法被字体缓存复用。另一处值得对照的是 checkout 布局/layout.tsx) 与 embed 布局/layout.tsx)它们同样在头部以relpreload预取关键资源——说明 Polar 把资源预取策略应用到了 checkout、embed 等独立入口的布局层而不仅限于主站。案例二导航组件中的 prefetch 与意图预取Polar 的 Dashboard 侧边栏 NavList.tsx 对所有路由链接统一开启了 Next.js 的prefetchLink prefetch{true} className{twMerge(/* ... */)} href{route.link} Next.js 的Link prefetch会在链接进入视口时预取目标路由的 RSC 负载与静态资源与preloadModule的「为下一次导航预取模块」在目标上高度一致——前者偏页面级后者偏模块级。Landing 页的 NavLink.tsx 与 LandingLayout.tsx 也使用了同类prefetch可见「导航即预取」是 Polar 前端的一致策略。案例三脚本非阻塞加载姊妹规则资源提示解决「下载时机」脚本的defer/async解决「执行不阻塞渲染」。姊妹规则 rendering-script-defer-async.md 给出了对照{/* 独立脚本执行顺序无关 → async */} script srchttps://example.com/analytics.js async / {/* 依赖 DOM 的脚本 → defer */} script src/scripts/utils.js defer /并在 Next.js 中优先使用next/script的strategy属性代替原生标签。两者组合起来的完整策略是关键资源尽早 preload非关键脚本不阻塞defer/async下一次导航所需模块按意图预取modulepreload / prefetch。实践清单在 Server Components / Layout 顶层调用资源提示 API让预加载指令进入初始 HTMLpreload 必须提供准确的as与type字体类资源务必带上crossOriginpreconnect 只给第一批请求目标其余域名用prefetchDNS轻量预热preloadModule 配合同路由 code-splitting 使用配合 hover/focus 事件做意图预取preinit 系 API 语义最重仅在必须最早执行时使用与defer/async、Next.jsprefetch配合形成「预取关键、异步其余、按需加载」的整体加载策略预取前用 DevTools 的 Network 面板核对as/type与实际资源一致避免「预取了却用不上」的浪费。参考规则原文rendering-resource-hints.md技能库总览SKILL.md 与 README.mdPolar 实战代码主站 Layout/layout.tsx)、Checkout Layout/layout.tsx)、Embed Layout/layout.tsx)、NavList.tsx官方文档React DOM 资源预加载 API 参考见规则文件末尾 Reference【免费下载链接】polarPolar — A billing platform for the intelligence era项目地址: https://gitcode.com/GitHub_Trending/po/polar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Polar 前端实战：用 React DOM Resource Hints 预加载关键资源，缩短首屏加载时间
Polar 前端实战用 React DOM Resource Hints 预加载关键资源缩短首屏加载时间【免费下载链接】polarPolar — A billing platform for the intelligence era项目地址: https://gitcode.com/GitHub_Trending/po/polar本篇技术指南以 Polar 仓库中 Vercel React Best Practices 技能库的rendering-resource-hints规则为骨架系统讲解 React DOM 的六大资源预加载 APIprefetchDNS、preconnect、preload、preloadModule、preinit、preinitModule的适用场景与源码级原理并结合 Polar Web 前端 的真实代码字体预加载、Sidebar 链接 prefetch 等展示落地方式。读完你可以在 Server Components、Layout 与导航组件中精准地为关键资源发起预取降低首屏与导航的感知延迟。规则出处Vercel React Best Practices 技能库本文对应规则位于 rendering-resource-hints.md属于 Vercel React Best Practices 技能库SKILL.md中第 6 类「Rendering Performance渲染性能」的规则之一影响等级为HIGH显著减少关键资源的加载时间。该技能库共 64 条规则、8 个优先级分类资源提示规则与同类性能规则配合使用效果最佳相关规则解决的核心问题规则文件rendering-resource-hints本文关键资源加载时序rules/rendering-resource-hints.mdbundle-preload基于用户意图预取重量级分包rules/bundle-preload.mdrendering-script-defer-async脚本加载不阻塞渲染rules/rendering-script-defer-async.mdserver-hoist-static-io静态 I/O 提升到模块级rules/server-hoist-static-io.md为什么需要资源提示先建连接再要资源浏览器的网络加载是分阶段的DNS 解析 → TCP 连接 → TLS 握手 → 发送请求 → 下载 → 解析执行。如果关键资源等到 HTML 解析到对应位置才被发现浏览器才从头开始这一链条首屏就会被「串行等待」拖慢。React DOM 的资源预加载 API 解决的就是这个时序问题——它们把「建立连接」和「取回资源」提前到浏览器解析 HTML 之前在 Server Components / 服务端渲染阶段调用API 生成的link relpreload、link relpreconnect等标签直接进入服务端输出的 HTML客户端还没收到 HTML 时预加载工作已经可以开始。这是规则文档强调的核心理由“start loading resources before the client even receives the HTML”在客户端收到 HTML 之前就开始加载资源。在客户端组件中调用React 会动态注入对应的link/script标签同样把加载时机提前到「真正需要」之前。因此这是一项声明式优化你在组件顶层调用一次React 负责去重同一资源只注入一次并渲染出正确的标签。六大 API 速览与逐项剖析规则文档给出的六个 API 构成了从「最轻的连接预热」到「最重的立即执行」的完整梯度API生成效果最佳使用场景prefetchDNS(href)link reldns-prefetch未来某刻会连的第三方域名只需提前解析 DNSpreconnect(href)link relpreconnect马上要发起请求的 API / CDN提前完成 DNS TCP TLSpreload(href, options)link relpreload当前页面就要用的关键资源字体、样式、图片、脚本preloadModule(href)link relmodulepreload很可能下一次导航就会用到的 JS 模块preinit(href, options)script/link relstylesheet必须最早执行/生效的样式或脚本会下载并求值preinitModule(href)script typemodule必须最早执行/生效的 ES Module连接预热prefetchDNS 与 preconnectimport { preconnect, prefetchDNS } from react-dom export default function App() { prefetchDNS(https://analytics.example.com) preconnect(https://api.example.com) return main{/* content */}/main }prefetchDNS只做 DNS 解析代价最低。适合「以后可能连但不确定」的域名例如埋点上报域名。preconnect把 DNS TCP TLS 全部提前做完浏览器拿到请求时可以直接发数据节省一次完整握手的往返RTT。适合确定马上要请求的 API 或 CDN 域名。一个实用的经验法则同一页面连接数有限preconnect只给「第一批请求就会打到的域名」其余用prefetchDNS兜底即可避免过度预热挤占连接与带宽。关键资源预取preload 与 preinitimport { preload, preinit } from react-dom export default function RootLayout({ children }) { // 预取字体文件 preload(/fonts/inter.woff2, { as: font, type: font/woff2, crossOrigin: anonymous, }) // 立即下载并应用关键样式 preinit(/styles/critical.css, { as: style }) return ( html body{children}/body /html ) }preload(href, options)告诉浏览器「这个资源我马上要用」。options中的as资源类型font、style、script、image等与typeMIME 类型必须与资源实际类型一致否则浏览器可能忽略该预取加载跨域字体等资源时需要crossOrigin。preinit(href, options)不仅下载还会立即求值/应用适合必须最早执行的「关键 CSS」或「关键脚本」。注意preinit语义更重只应在真正需要时使用。在 React Server Components 中调用preload效果最好API 调用发生在服务端渲染期间生成的link relpreload会输出到初始 HTML浏览器在解析 HTML 头部时就能并行启动下载。模块预取preloadModule 与 preinitModuleimport { preloadModule, preinitModule } from react-dom function Navigation() { const preloadDashboard () { preloadModule(/dashboard.js, { as: script }) } return ( nav a href/dashboard onMouseEnter{preloadDashboard} Dashboard /a /nav ) }preloadModule预取 ES Module生成modulepreload提示适用于按路由代码分割code splitting后的 JS 模块——例如用户悬停在导航链接上时预取目标路由的分包。preinitModule下载并立即执行 ES Module用于必须最早运行的关键模块。这个 onMouseEnter 预取模式与同技能库的 bundle-preload.md 规则思路一脉相承基于用户意图hover / focus提前加载重量级分包把等待时间藏进「用户思考的间隙」。何时用哪个场景对照表规则文档给出的决策表是实战中最常用的速查工具API使用场景prefetchDNS未来会连的第三方域名preconnect马上要请求的 API 或 CDNpreload当前页面必需的关键资源preloadModule可能的下一次导航所需的 JS 模块preinit必须最早执行/生效的样式或脚本preinitModule必须最早执行/生效的 ES Module判断顺序建议当前页马上用 →preload下一页可能用 →preloadModule必须最早执行 →preinit系连接未建立 →preconnect/prefetchDNS。Polar 仓库中的真实落地案例一Layout 中预加载全套品牌字体Polar 的主站根布局 clients/apps/web/src/app/(main)/layout.tsx/layout.tsx#L74-L151) 是一个典型实践在服务端 Layout 中为全套字体资源声明relpreload。从源码可见Polar 为 9 个字体文件Inter-Light/Regular/Medium/SemiBold、InterDisplay系列、Louize-Italic、GeistMono-Variable逐一声明link relpreload href/fonts/Inter-Regular.woff2 asfont typefont/woff2 crossOrigin /每个声明都带上了asfont与typefont/woff2这正是preload选项as/type/crossOrigin在原生 HTML 层面的等价写法验证了规则文档中preload(href, { as: font, type: font/woff2, crossOrigin: anonymous })的参数语义crossOrigin属性是字体预加载的必备项font-face资源默认以 CORS 模式请求缺失该属性会导致预取结果无法被字体缓存复用。另一处值得对照的是 checkout 布局/layout.tsx) 与 embed 布局/layout.tsx)它们同样在头部以relpreload预取关键资源——说明 Polar 把资源预取策略应用到了 checkout、embed 等独立入口的布局层而不仅限于主站。案例二导航组件中的 prefetch 与意图预取Polar 的 Dashboard 侧边栏 NavList.tsx 对所有路由链接统一开启了 Next.js 的prefetchLink prefetch{true} className{twMerge(/* ... */)} href{route.link} Next.js 的Link prefetch会在链接进入视口时预取目标路由的 RSC 负载与静态资源与preloadModule的「为下一次导航预取模块」在目标上高度一致——前者偏页面级后者偏模块级。Landing 页的 NavLink.tsx 与 LandingLayout.tsx 也使用了同类prefetch可见「导航即预取」是 Polar 前端的一致策略。案例三脚本非阻塞加载姊妹规则资源提示解决「下载时机」脚本的defer/async解决「执行不阻塞渲染」。姊妹规则 rendering-script-defer-async.md 给出了对照{/* 独立脚本执行顺序无关 → async */} script srchttps://example.com/analytics.js async / {/* 依赖 DOM 的脚本 → defer */} script src/scripts/utils.js defer /并在 Next.js 中优先使用next/script的strategy属性代替原生标签。两者组合起来的完整策略是关键资源尽早 preload非关键脚本不阻塞defer/async下一次导航所需模块按意图预取modulepreload / prefetch。实践清单在 Server Components / Layout 顶层调用资源提示 API让预加载指令进入初始 HTMLpreload 必须提供准确的as与type字体类资源务必带上crossOriginpreconnect 只给第一批请求目标其余域名用prefetchDNS轻量预热preloadModule 配合同路由 code-splitting 使用配合 hover/focus 事件做意图预取preinit 系 API 语义最重仅在必须最早执行时使用与defer/async、Next.jsprefetch配合形成「预取关键、异步其余、按需加载」的整体加载策略预取前用 DevTools 的 Network 面板核对as/type与实际资源一致避免「预取了却用不上」的浪费。参考规则原文rendering-resource-hints.md技能库总览SKILL.md 与 README.mdPolar 实战代码主站 Layout/layout.tsx)、Checkout Layout/layout.tsx)、Embed Layout/layout.tsx)、NavList.tsx官方文档React DOM 资源预加载 API 参考见规则文件末尾 Reference【免费下载链接】polarPolar — A billing platform for the intelligence era项目地址: https://gitcode.com/GitHub_Trending/po/polar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考