prefetcher
AI suggests routes and data to prefetch for better UX. Use when optimizing navigation performance.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
AI suggests routes and data to prefetch for better UX. Use when optimizing navigation performance.
How to use
Otwórz terminal w katalogu projektu i uruchom narzędzie wskazując ścieżkę do plików źródłowych: npx ai-prefetch ./src. Prefetcher przeskanuje strukturę tras i przepływy nawigacji.
Jeśli chcesz skupić się na konkretnym przepływie użytkownika (np. po zalogowaniu), dodaj flagę --entry: npx ai-prefetch ./src --entry /dashboard. To zawęża analizę do ścieżek startujących z tego punktu.
Aby uwzględnić analizę wywołań API, użyj flagi --include-api: npx ai-prefetch ./src --include-api. Narzędzie zidentyfikuje, które zapytania warto prefetchować razem z trasami.
Wygeneruj gotowy kod prefetch za pomocą flagi --generate: npx ai-prefetch ./src --generate. Otrzymasz sugestie, które zasoby prefetchować i w jakim porządku.
Jeśli używasz Next.js, zoptymalizuj prefetch linków: npx ai-prefetch ./src --framework next. Narzędzie dostosuje rekomendacje do komponentu Link z Next.js.
Wdrażając prefetch, pamiętaj o best practices: prefetchuj na hover, nie na load; wybierz 2–3 najbardziej prawdopodobne następne akcje; używaj requestIdleCallback dla niekritycznych zasobów, aby nie marnować pasma użytkownika.