SuperAPI AI 工具集

performance-optimizer

前端与建站

查看项目

更新于 10-15 20:07

技能介绍

用途:优化 SvelteKit 应用性能,利用框架全栈能力实现即时服务端渲染与渐进增强。

主要能力:提供快速诊断,用 rg 命令搜索反模式,如 onMount 配合 fetch、用 $state(true) 表示 isLoading、用 writable()/derived 处理初始页面数据、页面组件缺少 export let data。指出红旗信号:onMount + fetch 导致首屏慢、加载状态让用户看到 spinner、初始数据用 writable/derived 造成瀑布式取数、未使用 load 函数。

使用方式:三步转换流程。第一步识别数据需求:静态或很少变化的数据用通用 load 函数(SSR+CSR),用户交互数据(筛选、搜索)用表单动作加客户端动作,实时数据用 SSE 或 WebSocket。第二步抽取交互区块,把含 on:viewportenter、$state、on:click 的部分拆成独立组件,通过 props 接收 load 函数数据。第三步实现 SvelteKit load 函数,页面组件用 export let data 接收,可选渐进增强表单。还包含类型适配器模式,在数据库类型与前端类型不一致时用 adaptDBToFrontend 转换;以及通用 load 函数与父级数据合并。

适用场景:SvelteKit 项目首屏加载慢、存在客户端取数瀑布、需要 SSR 与渐进增强、需要表单动作与实时更新。

限制:资料未提供安装命令、版本要求、收费信息或效果数据;部分高级模式(并行取数、流式响应、缓存、路由保护、数据库事务、SSE)仅指向 references/patterns.md,正文未展开。