angular-best-practices
تحسين أداء Angular
تعاني تطبيقات Angular غالباً من مشكلات الأداء بسبب الكشف عن التغييرات غير الفعال، وانتفاخ الحزمة، واختناقات العرض. توفر هذه المهارة أفضل الممارسات ذات الأولوية لتحسين تطبيقات 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 والإشارات.
مراجعة كود الأداء
استخدم عند مراجعة كود Angular existente لتحديد اختناقات الأداء وتوصيات إعادة البناء المحددة.
تحسين ترقية Angular
استخدم عند ترحيل تطبيقات Angular إلى إصدارات أحدث للاستفادة من أحدث ميزات الأداء مثل Zoneless والترطيب التزايدي.
Essayez ces prompts
مراجعة هذا المكون Angular للمشكلات الأداء. تحقق من كشف التغييرات OnPush، الاستخدام الصحيح للإشارات، وأي تسريبات ذاكرة في الاشتراكات.
```typescript
{{CODE}}```تحليل هذا التطبيق Angular لفرص تحسين حجم الحزمة. ابحث عن:
1. المسارات التي يمكن تحميلها بشكل كسول
2. المكتبات الثقيلة التي يمكن استيرادها ديناميكياً
3. استيرادات ملفات barrel التي تسبب مشاكل tree-shaking
4. المكونات التي يمكنها استخدام @defer
```typescript
{{CODE}}```مراجعة هذا الإعداد Angular لأداء العرض من جانب الخادم. تحقق من: 1. تكوين الترطيب الصحيح 2. استخدام TransferState لمنع الطلبات المكررة 3. فصل المحتوى الحرج المؤجل 4. أي عمليات حظر في SSR
إجراء تدقيق أداء كامل لهذا الكود Angular. ترتيب النتائج حسب الأولوية (حرج، عالي، متوسط، منخفض) وتوصيات محددة لـ: - استراتيجية كشف التغييرات - أنماط جلب البيانات - تحسينات القالب - إدارة هيكل الحزمة
Bonnes pratiques
- استخدم دائماً ChangeDetectionStrategy.OnPush مع الإشارات للمكونات الجديدة - يوفر هذا أكبر تحسين للأداء
- فضل forkJoin و switchMap على الاشتراكات المتداخلة eliminate async waterfalls
- استخدم @defer لأي مكون غير مطلوب في إطار العرض الأولي لتقليل حجم الحزمة الأولي
Éviter
- تجنب كشف التغييرات الافتراضي مع الخصائص القابلة للتغيير - يسبب عمليات إعادة العرض غير الضرورية
- تجنب الاشتراكات المتداخلة في RxJS - تؤدي إلى async waterfalls وتسريبات الذاكرة
- تجنب التحميل المسبق لجميع المسارات - تنتفخ الحزمة الأولية وتبطئ وقت التفاعل