Agent Skillsa1stok/img2svg-animation › optimize-loader

optimize-loader

GitHub

优化React Router Loader性能,消除冗余DB查询、创建轻量级查询变体及并行化独立请求。适用于编写或审查Loader代码时提升页面加载速度。

.agents/skills/optimize-loader/SKILL.md a1stok/img2svg-animation

触发场景

审查调用领域操作服务的Loader代码 排查页面加载缓慢问题 发现Loader中存在重复获取数据的情况 发现Loader中过度获取嵌套关系数据 发现Loader中顺序执行独立查询

安装

npx skills add a1stok/img2svg-animation --skill optimize-loader -g -y
更多选项

非标准路径

npx skills add https://github.com/a1stok/img2svg-animation/tree/master/.agents/skills/optimize-loader -g -y

不安装直接使用

npx skills use a1stok/img2svg-animation@optimize-loader

指定 Agent (Claude Code)

npx skills add a1stok/img2svg-animation --skill optimize-loader -a claude-code -g -y

安装 repo 全部 skill

npx skills add a1stok/img2svg-animation --all -g -y

预览 repo 内 skill

npx skills add a1stok/img2svg-animation --list

SKILL.md

Frontmatter
{
    "name": "optimize-loader",
    "description": "Optimize slow React Router loaders by eliminating redundant DB queries, creating slim query variants, and parallelizing independent fetches. Use proactively when writing or reviewing loader code that calls domain operations services (e.g. CourseOperationsService, VideoOperationsService), or when triaging a slow page load."
}

Optimize Loader

Anti-patterns to catch

1. Re-fetching data the caller already has

If a loader fetches a record (e.g. getVideoWithClipsById) and then passes just the ID to a downstream function that re-fetches the same record internally — change the downstream function's signature to accept the already-fetched object.

// BAD — getNextVideoId internally calls getVideoWithClipsById again
const video = yield * db.getVideoWithClipsById(videoId)
const nextId = yield * db.getNextVideoId(videoId)

// GOOD — pass the already-fetched video
const video = yield * db.getVideoWithClipsById(videoId)
const nextId = yield * db.getNextVideoId(video)

When refactoring signatures, type the parameter as the minimal shape needed, not the full return type:

// Accept only what the function actually reads
function* (currentVideo: {
  id: string;
  lesson: {
    id: string;
    videos: Array<{ id: string; path: string }>;
    section: { repoVersion: { repo: { id: string } } };
  } | null;
})

2. Over-fetching nested relations

If a function only needs IDs and paths for navigation but loads full nested trees including clips, transcripts, etc. — create a slim query variant.

// BAD — loads clips, chapters, thumbnails etc. just to get video IDs
const course = yield * getCourseWithSectionsById(repoId)

// GOOD — dedicated lightweight query
const course = yield * getCourseNavigationData(repoId)

Slim query checklist:

  • columns: { id: true, path: true } — only select needed columns on leaf relations
  • limit: 1 on relations like versions where you only need the latest
  • Omit with: for relations you don't traverse (clips, chapters, thumbnails)
  • Keep where: filters (e.g. archived = false) and orderBy intact

3. Sequential independent queries

If a loader runs multiple independent DB calls sequentially, parallelize with Effect.all:

// BAD — sequential, total time = sum of both
const nextVideoId = yield * db.getNextVideoId(video)
const previousVideoId = yield * db.getPreviousVideoId(video)

// GOOD — parallel, total time = max of both
const [nextVideoId, previousVideoId] =
  yield * Effect.all([db.getNextVideoId(video), db.getPreviousVideoId(video)])

Dependency injection pattern

When adding a new query (like getCourseNavigationData) that lives in course operations but is used by video operations:

  1. Add the query to db-course-operations.server.ts and export it
  2. Declare the cross-domain dependency in VideoOperationsService's effect block via yield* CourseOperationsService
  3. The Effect Layer system resolves cross-domain dependencies automatically

版本历史

  • 3d56d15 当前 2026-07-19 08:58

同 Skill 集合

.agents/skills/do-work/SKILL.md
.agents/skills/improve-codebase-architecture-project/SKILL.md
.agents/skills/start-new-agent/SKILL.md
.agents/skills/tailwind-design-system/SKILL.md
.agents/skills/to-issues-project/SKILL.md
.agents/skills/to-prd-project/SKILL.md

元信息

文件数
0
版本
287e013
Hash
c499be7b
收录时间
2026-07-19 08:58

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-05 16:46
浙ICP备14020137号-1 $访客地图$