home / skills / pluginagentmarketplace / custom-plugin-angular / performance

performance skill

This skill optimizes Angular applications by applying change detection, lazy loading, and bundle strategies to boost performance.

npx playbooks add skill pluginagentmarketplace/custom-plugin-angular --skill performance

Review the files below or copy the command above to add this skill to your agents.

Files (6)

SKILL.md

1.2 KB

---
name: performance
description: Angular performance optimization, change detection strategies, and bundle optimization
sasmp_version: "1.3.0"
bonded_agent: 05-routing-performance
bond_type: PRIMARY_BOND
---

# Angular Performance Skill

## Overview
Optimize Angular applications for maximum performance through change detection strategies, lazy loading, and bundle optimization techniques.

## Topics Covered

### Change Detection
- OnPush change detection strategy
- ChangeDetectorRef usage
- Zone.js optimization
- Zoneless Angular applications
- Immutable data patterns

### Bundle Optimization
- Tree shaking effectiveness
- Code splitting strategies
- Lazy loading modules
- Preloading strategies
- Bundle analyzer usage

### Runtime Performance
- TrackBy for ngFor
- Virtual scrolling
- Debouncing and throttling
- Memory leak prevention
- Web Workers usage

### Build Optimization
- Production builds
- AOT compilation benefits
- Differential loading
- Source map strategies
- Compression techniques

## Prerequisites
- Angular Core fundamentals
- Module architecture
- Browser DevTools familiarity

## Learning Outcomes
- Implement OnPush change detection
- Optimize bundle sizes
- Profile and fix performance issues
- Build highly performant applications

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

FAQ

How much improvement can OnPush provide?

OnPush reduces change detection cycles by skipping checks for components without input changes; real gains depend on app structure but are typically significant for component-heavy UIs.

When should I use Web Workers?

Use Web Workers when CPU-intensive tasks block the main thread, such as large data processing or complex calculations that delay UI updates.