通用的预请求解决方案，在 JS 加载前提前发起请求，大幅提升首屏性能
| 包名 | 描述 |
|---|---|
@prefetch-sdk/core |
核心工具包 - 请求池、缓存策略、工具函数 |
@prefetch-sdk/html-script |
HTML 内联脚本 - 在 JS 加载前提前发起请求 |
@prefetch-sdk/swr |
SWR 集成 - 预热/预加载到 SWR 缓存 |
# 核心包
pnpm add @prefetch-sdk/core
# HTML 预请求
pnpm add @prefetch-sdk/html-script
# SWR 集成
pnpm add @prefetch-sdk/swr在 HTML <head> 中内联脚本，JS 加载前就开始请求：
<head>
<script>
(function() {
window.__PREFETCH_SDK__ = { $source: {} };
var promise = fetch('/api/user').then(r => r.json());
promise.clear = function() { delete window.__PREFETCH_SDK__['user']; };
window.__PREFETCH_SDK__['user'] = promise;
window.__PREFETCH_SDK__.$source['user'] = { $path: '/api/user', $params: {} };
})();
</script>
</head>在 React 中消费：
import { consumePrefetch } from '@prefetch-sdk/html-script';
const data = await consumePrefetch<User>('user');import { preloadBySwr, useRequestBySwr } from '@prefetch-sdk/swr';
// 预热到 SWR 缓存
await preloadBySwr(fetchUser, { id: 1 }, { metadata: { levelType: 'user' } });
// 组件中使用
function UserProfile() {
const { data, pending, refresh } = useRequestBySwr(
fetchUser,
{ id: 1 },
{ metadata: { levelType: 'user' } }
);
return <div>{data?.name}</div>;
}import { withCache, todayCacheStrategy, ttlCacheStrategy } from '@prefetch-sdk/core';
// 当天缓存
const cachedFetcher = withCache(
fetchData,
todayCacheStrategy((params) => `data:${params.id}`)
);
// TTL 缓存 (5分钟)
const ttlFetcher = withCache(
fetchData,
ttlCacheStrategy((params) => `data:${params.id}`, 5 * 60 * 1000)
);import { createPrefetchPool } from '@prefetch-sdk/core';
const pool = createPrefetchPool({ debug: true });
// 添加预请求
await pool.execute({
name: 'userData',
fetcher: fetchUser,
params: { id: 1 },
});
// 消费
const data = await pool.consume('userData');# 安装依赖
pnpm install
# 构建
pnpm build
# 启动 playground
pnpm playground# 1. 创建 changeset (记录变更)
pnpm changeset
# 2. 更新版本号和 CHANGELOG
pnpm run version
# 3. 构建并发布
pnpm release推送到 main 分支后，GitHub Actions 会自动：
- 若有 changeset：创建 Release PR
- 合并 Release PR 后：自动发布到 npm
注意：需在 GitHub 仓库设置 NPM_TOKEN Secret。
MIT