prefetcher
AI analizuje trasy nawigacji i sugeruje, co prefetchować dla szybszych przejść między stronami.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Prefetcher to narzędzie, które automatycznie analizuje przepływy użytkowników w Twojej aplikacji i wskazuje, które trasy, dane API i obrazy warto załadować z wyprzedzeniem. Zamiast czekać, aż użytkownik kliknie link, system przewiduje następny krok i przygotowuje zasoby wcześniej. Działa z Next.js, React Router i aplikacjami vanilla. Uruchamiasz jedną komendę — bez konfiguracji, bez kluczy API. Idealne do optymalizacji percepcji wydajności nawigacji.
Jak używać
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.