angular-best-practices
優化 Angular 效能
Angular 應用程式常因變更偵測效率低落、套件臃腫及渲染瓶頸而產生效能問題。此技能提供優先最佳實踐，以優化 Angular 應用程式的速度與效率。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「angular-best-practices」。 Review this component for performance: @Component({ template: `<div>{{ data.name }}</div>` }) export class MyComponent { data = { name: 'test' }; }
預期結果:
- CRITICAL: 使用 OnPush 變更偵測策略以減少不必要的重新渲染
- 將可變屬性替換為 Signal 以實現細粒度反應性：data = signal({ name: 'test' })
- 對任何 *ngFor 迴圈使用 trackBy 以優化 DOM 更新
正在使用「angular-best-practices」。 How can I optimize bundle size in my Angular app?
預期結果:
- 1. LAZY LOAD routes - 對功能模組使用 loadChildren()
- 2. DYNAMIC IMPORTS - 按需載入重量級程式庫：await import('chart.js')
- 3. @defer BLOCKS - 延遲非關鍵元件：@defer (on viewport)
- 4. AVOID BARRELS - 直接從原始檔案匯入，而非 index 匯出
- 5. NgOptimizedImage - 使用內建影像優化指令
安全審計
安全Static 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.
品質評分
你能建構什麼
新 Angular 元件開發
建立新 Angular 元件時使用，確保從一開始就遵循效能最佳實踐，包括 OnPush 策略與 Signals。
效能程式碼審查
審查現有 Angular 程式碼時使用，以識別效能瓶頸並獲得具體的重構建議。
Angular 升級優化
將 Angular 應用程式遷移至更新版本時使用，以利用最新效能功能如 Zoneless 與增量水合。
試試這些提示
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
最佳實務
- 新元件應始終對 Signals 使用 ChangeDetectionStrategy.OnPush - 這提供最大的效能提升
- 優先使用 forkJoin 與 switchMap 而非巢狀訂閱，以消除异步瀑布問題
- 對任何初始視區中不需要的元件使用 @defer，以減少初始套件大小
避免
- 避免對可變屬性使用預設變更偵測 - 會導致不必要的重新渲染
- 避免 RxJS 中的巢狀訂閱 - 會導致异步瀑布與記憶體洩漏
- 避免 eagerly 載入所有路由 - 會膨脹初始套件並減慢可互動時間