列表加载慢可能来自以下方面:
| 来源 | 可能原因 |
|---|---|
| 后端 API | 数据库查询慢、N+1 查询、缺少索引、返回字段过多 |
| 前端请求 | 首次加载时并发请求多、请求参数冗余 |
| 前端渲染 | 列过多、复杂 formatter/cellRender、compute 计算量大 |
status、create_datetime、borrow_type)limit/offset 或游标分页,避免全表扫描# 使用 select_related / prefetch_related 减少 N+1 查询
queryset = BorrowApplication.objects.select_related(
'borrower_info', 'creator'
).prefetch_related(
'items'
).only('id', 'application_no', 'status', ...) # 只返回列表需要的字段
crud.tsx 中 pageRequest 的 console.log(query) 会在每次请求时执行,生产环境应移除。
show: false,通过列设置由用户按需显示dayjs 等格式化逻辑尽量复用,避免每行重复创建defineAsyncComponent 或路由懒加载,减少首屏 bundletransformQuery 只传递有值的搜索条件,减少无效参数handleBorrowSubmit 中已去除重复的 doRefresh 调用,仅保留 crudExpose.doRefresh()status 做初始筛选,onMounted 中会调用 doSearch。若 fast-crud 默认也会做一次初始请求,可能造成首屏请求两次,可考虑在 crud 配置中关闭默认首次加载,仅依赖 doSearch 触发定位瓶颈:用浏览器 DevTools → Network 查看 /api/system/borrow/application/ 请求耗时
后端慢:检查数据库慢查询、接口是否有 N+1、是否缺少索引
前端慢:检查列数量、formatter 复杂度、是否有大量 compute
src/utils/requestCache.ts 提供通用 createRequestCachecrud.tsx 中 pageRequest 使用缓存,相同查询参数在 TTL 内直接返回缓存invalidateBorrowListCache() 再 doRefresh(),确保展示最新数据crud.tsx 中调整 createRequestCache({ ttl: 30 * 1000 })borrow:list:,用于按业务隔离其他 crud 列表如需缓存,可参考借用列表:
import { createRequestCache } from '/@/utils/requestCache';
const cache = createRequestCache({ ttl: 30 * 1000, keyPrefix: 'xxx:list:' });
// pageRequest 中:先 cache.get(query),命中则返回;否则请求后 cache.set(query, res)
// 变更后:export invalidateXxxListCache,在刷新前调用
console.log(立即)status、create_datetime 等建索引select_related/prefetch_related 并精简返回字段pageSize 合理(当前 10 条/页已较小)