Angular Performance Optimization

What it does

This skill enables AI agents to analyze and optimize the runtime performance of Angular applications. It focuses on improving load times, reducing bundle sizes, and enhancing overall user experience through targeted code adjustments.

When to use it

• Diagnosing slow initial page loads in production builds.
• Reducing memory usage in long-running single-page applications.
• Optimizing change detection strategies for complex component trees.
• Minimizing network requests and payload sizes during deployment.

Key capabilities

• Identifying performance bottlenecks in Angular components and services.
• Analyzing bundle size and suggesting tree-shaking opportunities.
• Evaluating change detection efficiency and recommending OnPush strategies.
• Detecting unnecessary re-renders caused by dirty checking or event listeners.

Example prompts

• "Analyze my Angular application's performance metrics and suggest specific optimizations to reduce the Time to Interactive (TTI)."
• "Identify components in my codebase that are causing excessive change detection cycles and propose fixes."
• "Review my production build configuration and recommend strategies to minimize the final bundle size without losing functionality."

Tips & gotchas

Ensure you have access to performance profiling tools like Angular DevTools or browser Lighthouse reports before running this skill, as it relies on existing metrics to provide accurate recommendations. Avoid applying aggressive optimizations to small-scale applications where the development time may outweigh the performance gains.