wehub-skill-sync
86 lines
2.4 KiB
Markdown
86 lines
2.4 KiB
Markdown
---
|
||
title: Use React DOM Resource Hints
|
||
impact: HIGH
|
||
impactDescription: reduces load time for critical resources
|
||
tags: rendering, preload, preconnect, prefetch, resource-hints
|
||
---
|
||
|
||
## 使用 React DOM 资源提示
|
||
|
||
**影响：高（减少关键资源的加载时间）**
|
||
|
||
React DOM 提供了向浏览器提示其即将需要的资源的 API。这些 API 在服务端组件中尤其有用，可以在客户端甚至接收到 HTML 之前就开始加载资源。
|
||
|
||
- **`prefetchDNS(href)`**：为你预期要连接的域名解析 DNS
|
||
- **`preconnect(href)`**：与服务器建立连接（DNS + TCP + TLS）
|
||
- **`preload(href, options)`**：获取你即将使用的资源（样式表、字体、脚本、图片）
|
||
- **`preloadModule(href)`**：获取你即将使用的 ES 模块
|
||
- **`preinit(href, options)`**：获取并执行样式表或脚本
|
||
- **`preinitModule(href)`**：获取并执行 ES 模块
|
||
|
||
**示例（预连接到第三方 API）：**
|
||
|
||
```tsx
|
||
import { preconnect, prefetchDNS } from 'react-dom'
|
||
|
||
export default function App() {
|
||
prefetchDNS('https://analytics.example.com')
|
||
preconnect('https://api.example.com')
|
||
|
||
return <main>{/* content */}</main>
|
||
}
|
||
```
|
||
|
||
**示例（预加载关键字体和样式）：**
|
||
|
||
```tsx
|
||
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>
|
||
)
|
||
}
|
||
```
|
||
|
||
**示例（为代码分割路由预加载模块）：**
|
||
|
||
```tsx
|
||
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](https://react.dev/reference/react-dom#resource-preloading-apis)
|