angular-best-practices
Angular-Performance optimieren
Angular-Anwendungen leiden oft unter Performance-Problemen durch ineffiziente Change Detection, übermäßige Bundle-Größe und Rendering-Engpässe. Diese Skill bietet priorisierte bewährte Praktiken zur Optimierung von Angular-Apps für Geschwindigkeit und Effizienz.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "angular-best-practices". Überprüfen Sie diese Komponente auf Performance: @Component({ template: `<div>{{ data.name }}</div>` }) export class MyComponent { data = { name: 'test' }; }
Résultat attendu:
- KRITISCH: Verwenden Sie die OnPush-Change-Detection-Strategie, um unnötige Re-Renderings zu reduzieren
- Ersetzen Sie veränderliche Properties durch Signals für granulare Reaktivität: data = signal({ name: 'test' })
- Verwenden Sie trackBy mit allen *ngFor-Loops, um DOM-Updates zu optimieren
Utilisation de "angular-best-practices". Wie kann ich die Bundle-Größe in meiner Angular-App optimieren?
Résultat attendu:
- 1. LAZY LOAD von Routen - Verwenden Sie loadChildren() für Feature-Module
- 2. DYNAMISCHE IMPORTS - Laden Sie schwere Bibliotheken bei Bedarf: await import('chart.js')
- 3. @defer-BLOCKS - Stellen Sie nicht-kritische Komponenten zurück: @defer (on viewport)
- 4. VERMEIDEN SIE BARRELS - Importieren Sie direkt aus Quelldateien, nicht aus Index-Exports
- 5. NgOptimizedImage - Verwenden Sie die integrierte Bildoptimierungs-Direktive
Audit de sécurité
SûrStatic analysis flagged 107 potential issues, but all are false positives. The skill is pure documentation about Angular best practices. Code block backticks were misidentified as shell execution, dynamic imports are legitimate Angular lazy loading patterns, and URLs are documentation links. No malicious code or security risks present.
Score de qualité
Ce que vous pouvez construire
Entwicklung neuer Angular-Komponenten
Verwenden Sie diese Skill beim Erstellen neuer Angular-Komponenten, um sicherzustellen, dass von Anfang an bewährte Performance-Praktiken eingehalten werden, einschließlich OnPush-Strategie und Signals.
Performance-Code-Review
Verwenden Sie diese Skill beim Überprüfen bestehender Angular-Codes, um Performance-Engpässe zu identifizieren und spezifische Refactoring-Empfehlungen zu erhalten.
Angular-Upgrade-Optimierung
Verwenden Sie diese Skill beim Migrieren von Angular-Anwendungen auf neuere Versionen, um neueste Performance-Features wie Zoneless und inkrementelle Hydratation zu nutzen.
Essayez ces prompts
Überprüfen Sie diese Angular-Komponente auf Performance-Probleme. Prüfen Sie OnPush-Change-Detection, korrekte Verwendung von Signals und mögliche Memory-Leaks bei Subscriptions.
```typescript
{{CODE}}```Analysieren Sie diese Angular-Anwendung auf Möglichkeiten zur Bundle-Größenoptimierung. Suchen Sie nach:
1. Routen, die lazy geladen werden könnten
2. Schwere Bibliotheken, die dynamisch importiert werden könnten
3. Barrel-File-Imports, die Tree-Shaking-Probleme verursachen
4. Komponenten, die @defer verwenden könnten
```typescript
{{CODE}}```Überprüfen Sie dieses Angular-Setup auf Server-Side-Rendering-Performance. Prüfen Sie: 1. Korrekte Hydratationskonfiguration 2. Verwendung von TransferState zur Vermeidung doppelter Anfragen 3. Trennung von kritischem und zurückgestelltem Inhalt 4. Blockierende Operationen im SSR
Führen Sie ein komplettes Performance-Audit dieses Angular-Codes durch. Kategorisieren Sie die Befunde nach Priorität (Kritisch, Hoch, Mittel, Niedrig) und geben Sie spezifische Empfehlungen für: - Change-Detection-Strategie - Datenabrufmuster - Template-Optimierungen - Speicherverwaltung - Bundle-Struktur
Bonnes pratiques
- Verwenden Sie immer ChangeDetectionStrategy.OnPush mit Signals für neue Komponenten - dies bringt den größten Performance-Gewinn
- Bevorzugen Sie forkJoin und switchMap gegenüber verschachtelten Subscriptions, um Async-Wasserfälle zu eliminieren
- Verwenden Sie @defer für alle Komponenten, die nicht im initialen Viewport benötigt werden, um die initiale Bundle-Größe zu reduzieren
Éviter
- Vermeiden Sie Default-Change-Detection mit veränderlichen Properties - verursacht unnötige Re-Renderings
- Vermeiden Sie verschachtelte Subscriptions in RxJS - führt zu Async-Wasserfällen und Memory-Leaks
- Vermeiden Sie Eager-Loading aller Routen - bläht das initiale Bundle auf und verlangsamt Time-to-Interactive