performance_skill

Overview

This skill teaches practical Angular performance optimization techniques focused on change detection strategies, bundle size reduction, and runtime improvements. It helps developers identify bottlenecks, apply targeted fixes, and deliver faster, more efficient Angular applications. The content prioritizes measurable outcomes and production-ready practices.

How this skill works

The skill inspects common performance pain points and provides actionable patterns: adopt OnPush change detection, use ChangeDetectorRef judiciously, and explore zoneless options. It covers build-time optimizations like AOT, differential loading, and compression, plus runtime tactics such as trackBy, virtual scrolling, and Web Worker offloading. Each topic links profiling steps to concrete code changes.

When to use it

• Before shipping features to reduce bundle sizes and initial load time
• When change detection causes UI lag or excessive re-rendering
• While profiling slow page interactions or memory growth in DevTools
• When preparing large lists or data-heavy views for production
• When migrating to modern build pipelines or enabling AOT/differential loading

Best practices

• Prefer OnPush and immutable data to limit change detection work
• Use lazy loading and code splitting to defer noncritical modules
• Run bundle analyzers and remove unused dependencies for tree shaking
• Apply trackBy for ngFor and virtual scroll for large lists
• Debounce/throttle high-frequency events and avoid long-running tasks on the main thread

Example use cases

• Refactor a dashboard to OnPush to cut unnecessary re-renders and CPU usage
• Split a monolithic app into lazy-loaded feature modules to improve Time to Interactive
• Use Web Workers to move heavy calculations off the UI thread for smoother animation
• Analyze a production bundle and remove polyfills or libraries to shrink payload
• Implement virtual scrolling for a table rendering tens of thousands of rows