angular-best-practices

Umiejętność zawierająca kompleksowy przewodnik optymalizacji wydajności aplikacji Angular. Zastosuj ją podczas pisania, przeglądu lub refaktoryzacji kodu Angular, aby osiągnąć optymalną wydajność, zmniejszyć rozmiar pakietu i poprawić efektywność renderowania. Przewodnik obejmuje 8 kategorii reguł — od krytycznej detekcji zmian i asynchronicznych operacji, przez optymalizację pakietu, aż po zarządzanie pamięcią. Każda kategoria zawiera konkretne wskazówki i priorytety wpływu na działanie aplikacji.

1. Zainstaluj umiejętność w swoim środowisku pracy z AI (np. Claude, Copilot) — dodaj ją do dostępnych narzędzi lub zaimportuj z repozytorium sickn33.

2. Kiedy piszesz nowy komponent Angular lub pracujesz nad istniejącym kodem, wyzwól umiejętność i podaj kontekst — na przykład "Przejrzyj ten komponent pod kątem wydajności" lub "Jak zoptymalizować bundle size w tej aplikacji".

3. Umiejętność zwróci Ci reguły pogrupowane wg priorytetu — zacznij od kategorii CRITICAL (detekcja zmian, asynchroniczne operacje, optymalizacja pakietu), które mają największy wpływ na wydajność.

4. Zastosuj konkretne wskazówki do swojego kodu — na przykład włącz OnPush change detection w komponentach, użyj Signals zamiast tradycyjnych properties, lub zoptymalizuj lazy loading modułów.

5. Podczas refaktoryzacji istniejącego kodu odwołuj się do przewodnika dla każdej kategorii — od renderowania (@defer, trackBy, virtualization) przez server-side rendering aż po zarządzanie pamięcią i czyszczenie subskrypcji.

6. Wróć do umiejętności w trakcie code review — użyj jej jako listy kontrolnej, aby sprawdzić, czy kod spełnia best practices w zakresie wydajności, hydration i optymalizacji szablonów.