angular-best-practices
Angular 성능 최적화
Angular 애플리케이션은 비효율적인 변경 감지, 번들 빌림(bloat), 렌더링 병목으로 인해 성능 문제가 발생하기 쉽습니다. 이 스킬은 속도와 효율성을 위한 Angular 앱 최적화 방법을 우선순위별로 제공합니다.
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". Review this component for performance: @Component({ template: `<div>{{ data.name }}</div>` }) export class MyComponent { data = { name: 'test' }; }
Résultat attendu:
- CRITICAL: Use OnPush change detection strategy to reduce unnecessary re-renders
- Replace mutable property with Signal for granular reactivity: data = signal({ name: 'test' })
- Use trackBy with any *ngFor loops to optimize DOM updates
Utilisation de "angular-best-practices". How can I optimize bundle size in my Angular app?
Résultat attendu:
- 1. LAZY LOAD routes - Use loadChildren() for feature modules
- 2. DYNAMIC IMPORTS - Load heavy libraries on demand: await import('chart.js')
- 3. @defer BLOCKS - Defer non-critical components: @defer (on viewport)
- 4. AVOID BARRELS - Import directly from source files, not index exports
- 5. NgOptimizedImage - Use built-in image optimization directive
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
새로운 Angular 컴포넌트 개발
새로운 Angular 컴포넌트를 생성할 때 OnPush 전략 및 Signals를 포함한 성능 모범 사례를一开始就 적용하도록 합니다.
성능 코드 리뷰
기존 Angular 코드를 검토하여 성능 병목 현상을 식별하고 구체적인 리팩토링 권장 사항을 받을 때 사용합니다.
Angular 업그레이드 최적화
Zoneless 및 증분 하이드레이션과 같은 최신 성능 기능을 활용하기 위해 Angular 애플리케이션을 최신 버전으로 마이그레이션할 때 사용합니다.
Essayez ces prompts
Review this Angular component for performance issues. Check for OnPush change detection, proper use of Signals, and any memory leaks in subscriptions.
```typescript
{{CODE}}```Analyze this Angular application for bundle size optimization opportunities. Look for:
1. Routes that could be lazy loaded
2. Heavy libraries that could be dynamically imported
3. Barrel file imports causing tree-shaking issues
4. Components that could use @defer
```typescript
{{CODE}}```Review this Angular setup for server-side rendering performance. Check for: 1. Proper hydration configuration 2. Use of TransferState to prevent duplicate requests 3. Critical vs deferred content separation 4. Any blocking operations in SSR
Perform a complete performance audit of this Angular code. Categorize findings by priority (Critical, High, Medium, Low) and provide specific recommendations for: - Change detection strategy - Data fetching patterns - Template optimizations - Memory management - Bundle structure
Bonnes pratiques
- Always use ChangeDetectionStrategy.OnPush with Signals for new components - this provides the biggest performance gain
- Prefer forkJoin and switchMap over nested subscriptions to eliminate async waterfalls
- Use @defer for any component not needed in the initial viewport to reduce initial bundle size
Éviter
- Avoid default change detection with mutable properties - causes unnecessary re-renders
- Avoid nested subscriptions in RxJS - leads to async waterfalls and memory leaks
- Avoid eager loading all routes - bloats initial bundle and slows time-to-interactive