Angular 性能优化与最佳实践指南

通过一套标准化的性能优先级规则，帮助开发者在编写、评审或重构 Angular 代码时，快速消除性能瓶颈并优化包体积与渲染效率。

为什么需要这个技能

Angular 应用在规模扩大后，经常面临变更检测过于频繁、初始加载包体积过大以及 SSR 水合（Hydration）缓慢等问题。如果继续使用传统的默认配置和过时的模式（如过度依赖 zone.js 或在模板中调用函数），会导致页面响应迟钝。

本技能为 AI 提供了从“关键（Critical）”到“低（Low）”的优先级指南，确保优化工作聚焦在对用户体验影响最大的环节，如由 Signal 驱动的精准更新和 @defer 延迟加载。

适用场景

• 新功能开发：编写新的组件或页面时，确保从一开始就采用高性能模式。
• 代码评审：在 PR 阶段识别潜在的性能陷阱（如模板中的方法调用）。
• 存量重构：将旧的 *ngIf/*ngFor 迁移至新控制流，或将普通属性迁移至 Signals。
• 首屏优化：配置 SSR 渐进式水合，降低 LCP 等核心 Web 指标。

核心工作流

1. 变更检测优化（最高优先级）：

   • 将 ChangeDetectionStrategy 设置为 OnPush。
   • 使用 signal() 代替可变属性，以实现更精准的更新。
   • 在新项目中尝试开启 provideZonelessChangeDetection() 以彻底移除 zone.js。

2. 异步流与包体积控制：

   • 使用 forkJoin 或 switchMap 消除 RxJS 订阅瀑布流。
   • 实现路由级懒加载（Lazy Loading）并使用 @defer 块延迟加载重型组件。
   • 避免使用 Barrel Files（索引文件）导出，以防止 Tree-shaking 失效。

3. 渲染与内存管理：

   • 在 @for 循环中必须指定 track 表达式，避免不必要的 DOM 重绘。
   • 使用 computed() 处理派生数据，而非在模板中调用方法。
   • 使用 takeUntilDestroyed 自动管理订阅生命周期，防止内存泄漏。

// 性能优化示例：Signals + OnPush
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div class="count">{{ count() }}</div>`,
})
export class CounterComponent {
  count = signal(0); // 使用 Signal 实现精准更新
}

下载和安装

下载 angular-best-practices 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐