angular-performance

用途

该技能用于 Angular 应用的性能优化，覆盖图片优化、组件与路由的懒加载、服务端渲染（SSR）与 Hydration，以及慢计算的处理。触发场景为：优化 Angular 应用性能、图片或懒加载时。

主要能力

图片优化（NgOptimizedImage）

要求使用 NgOptimizedImage，从 @angular/common 导入。示例：

import { NgOptimizedImage } from '@angular/common';

@Component({
  imports: [NgOptimizedImage],
  template: `
    <!-- LCP image: add priority -->
    <img ngSrc="hero.jpg" width="800" height="400" priority>
    
    <!-- Regular: lazy loaded by default -->
    <img ngSrc="thumb.jpg" width="200" height="200">
    
    <!-- Fill mode (parent needs position: relative) -->
    <img ngSrc="bg.jpg" fill>

    <!-- With placeholder -->
    <img ngSrc="photo.jpg" width="400" height="300" placeholder>
  `
})

规则：

始终设置 width 和 height（或使用 fill）
为 LCP（Largest Contentful Paint）图片添加 priority
使用 ngSrc 而非 src
fill 图片的父元素必须具有 position: relative/fixed/absolute

@defer 延迟加载组件

@defer (on viewport) {
  <heavy-component />
} @placeholder {
  <p>Placeholder shown immediately</p>
} @loading (minimum 200ms) {
  <spinner />
} @error {
  <p>Failed to load</p>
}

触发条件：

on viewport：用于首屏以下内容
on interaction：点击/聚焦/悬停时加载
on idle：浏览器空闲时加载
on timer(500ms)：延迟后加载
when condition：表达式为真时加载

支持多触发条件与条件加载：

<!-- Multiple triggers -->
@defer (on viewport; on interaction) {
  <comments />
}

<!-- Conditional -->
@defer (when showComments()) {
  <comments />
}

懒加载路由

// Single component
{
  path: 'admin',
  loadComponent: () => import('./features/admin/admin').then(c => c.AdminComponent)
}

// Feature with child routes
{
  path: 'users',
  loadChildren: () => import('./features/users/routes').then(m => m.USERS_ROUTES)
}

SSR 与 Hydration

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration()
  ]
});

场景选择：

SEO 关键（博客、电商）：SSR
仪表盘/管理后台：CSR
静态营销站点：SSG/Prerender

慢计算处理

优化算法：始终首选
纯管道（Pure pipes）：缓存单个结果
记忆化（Memoization）：缓存多个结果
computed()：派生信号状态

注意：绝不在生命周期钩子（ngOnInit、ngAfterViewInit）中触发重排/重绘。

使用方式

该技能以规则与代码示例的形式提供指导，在优化 Angular 应用性能、图片或懒加载时触发使用。具体安装与调用方式暂未提供。

适用场景

适用于需要优化 Angular 应用性能的场景，包括图片加载优化、组件与路由懒加载、SSR 与 Hydration 配置，以及慢计算优化。

限制

资料未提供该技能的安装命令、依赖要求、版本兼容性、收费与价格信息，暂未提供。

参考资源

https://angular.dev/guide/image-optimization
https://angular.dev/guide/defer
https://angular.dev/best-practices/runtime-performance
https://angular.dev/guide/ssr