wehub-skill-sync
2.4 KiB
2.4 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Use React DOM Resource Hints | HIGH | reduces load time for critical resources | rendering, preload, preconnect, prefetch, resource-hints |
使用 React DOM 资源提示
影响：高（减少关键资源的加载时间）
React DOM 提供了向浏览器提示其即将需要的资源的 API。这些 API 在服务端组件中尤其有用，可以在客户端甚至接收到 HTML 之前就开始加载资源。
prefetchDNS(href)：为你预期要连接的域名解析 DNSpreconnect(href)：与服务器建立连接（DNS + TCP + TLS）preload(href, options)：获取你即将使用的资源（样式表、字体、脚本、图片）preloadModule(href)：获取你即将使用的 ES 模块preinit(href, options)：获取并执行样式表或脚本preinitModule(href)：获取并执行 ES 模块
示例（预连接到第三方 API）：
import { preconnect, prefetchDNS } from 'react-dom'
export default function App() {
prefetchDNS('https://analytics.example.com')
preconnect('https://api.example.com')
return <main>{/* content */}</main>
}
示例（预加载关键字体和样式）：
import { 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>
)
}
示例（为代码分割路由预加载模块）：
import { preloadModule, preinitModule } from 'react-dom'
function Navigation() {
const preloadDashboard = () => {
preloadModule('/dashboard.js', { as: 'script' })
}
return (
<nav>
<a href="/dashboard" onMouseEnter={preloadDashboard}>
Dashboard
</a>
</nav>
)
}
何时使用每个 API：
| API | 使用场景 |
|---|---|
prefetchDNS |
稍后需要连接的第三方域名 |
preconnect |
即将立即请求的 API 或 CDN |
preload |
当前页面所需的关键资源 |
preloadModule |
可能的下一次导航所需的 JS 模块 |
preinit |
必须尽早执行的样式表/脚本 |
preinitModule |
必须尽早执行的 ES 模块 |
参考文档：React DOM 资源预加载 API