Use when optimizing bundle size, load times, query performance, or before production launch. Triggers on "slow", "performance", "optimize", "bundle size", "lazy load", "cache", "lighthouse".
Identify and fix performance bottlenecks in the React SPA, Supabase queries, and edge functions.
npx vite-bundle-visualizer (target: < 300KB gzipped)Code splitting:
const Dashboard = lazy(() => import("@/pages/Dashboard"));
<Suspense fallback={<Loading />}><Route path="/dashboard" element={<Dashboard />} /></Suspense>
Memoization (only for expensive ops):
const processed = useMemo(() => expensiveCalc(data), [data]);
const handleClick = useCallback(() => doThing(id), [id]);
Images: Cloudinary transforms w_400,f_auto,q_auto, loading="lazy" on below-fold.
Select only needed columns:
supabase.from("projects").select("id, name, status, updated_at")
Add indexes:
create index concurrently idx_<table>_<column> on public.<table>(<column>);
React Query caching:
useQuery({ queryKey: ["projects"], queryFn: fetch, staleTime: 5 * 60 * 1000 });