angular-perf

Implement lazy loading, OnPush change detection, trackBy, and bundle analysis for Angular applications.

Updated Feb 17, 2026
One-click install
npx skills add https://github.com/Objective-Arts/lens-dist --skill angular-perf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-perf
Source: https://github.com/Objective-Arts/lens-dist/tree/main/canon/angular-perf
Command: npx skills add https://github.com/Objective-Arts/lens-dist --skill angular-perf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the critical need to improve the performance and efficiency of Angular applications, ensuring faster load times, reduced bundle sizes, and a smoother user experience.

Core Features & Use Cases

  • Lazy Loading: Implement strategies to load modules and components only when needed.
  • Change Detection Optimization: Utilize OnPush strategy and trackBy for efficient rendering.
  • Bundle Analysis: Understand and manage application bundle sizes to meet performance budgets.
  • Use Case: A large e-commerce Angular application is experiencing slow initial load times. This Skill can be used to refactor routing to implement lazy loading for product detail pages and optimize image loading with NgOptimizedImage.

Quick Start

Apply the OnPush change detection strategy to the UserProfileComponent.

Frequently Asked Questions about angular-perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize Angular application performance and reduce slow initial load times?

To optimize Angular application performance, you can implement lazy loading for modules, apply the OnPush change detection strategy, and use trackBy for ngFor to ensure faster load times and smoother rendering.

What is the best way to reduce Angular bundle size for a large application?

The best way to reduce Angular bundle size is by implementing lazy loading for code splitting and performing bundle analysis to manage application assets and meet performance budgets.

How does OnPush change detection and trackBy improve Angular rendering efficiency?

OnPush change detection improves rendering efficiency by only checking components when inputs change, while trackBy optimizes ngFor loops by tracking item identity to prevent unnecessary DOM manipulations.

When should I implement lazy loading in my Angular routing modules?

You should implement lazy loading in Angular routing when you have large applications, such as e-commerce platforms, to load modules like product detail pages only when needed and improve initial load times.

Can I use virtual scrolling and NgOptimizedImage to optimize Angular user experience?

Yes, you can use virtual scrolling for efficient rendering of large lists and NgOptimizedImage to optimize image loading, addressing runtime efficiency and delivering a smoother user experience.