用途
Angular Best Practices (v20+) 是一份针对 Angular 20 及以上版本应用的性能优化指南，围绕 Signals、httpResource、signal inputs/outputs、@defer 块和原生控制流语法等现代特性展开。它包含 8 个类别、35 条以上规则，并按影响程度划分优先级，用于指导自动化重构和代码生成。
何时适用
在以下场景中可参考这些指南：
- 编写新的 Angular 20+ 组件
- 使用 Signals 进行响应式状态管理（signal、computed、linkedSignal、effect）
- 使用 httpResource/resource 进行数据获取
- 使用 signal inputs/outputs 替代装饰器
- 实现 @defer 进行懒加载
- 使用原生控制流（@if、@for、@switch）
- 实现带增量水合的 SSR
- 审查代码中的性能问题
主要能力（v20+ 关键特性）
- Signals：细粒度响应式（signal、computed、linkedSignal、effect）
- httpResource：基于 Signal 的 HTTP，带自动加载状态
- Signal inputs/outputs：用 input()、output() 替代装饰器
- @defer：模板级懒加载，支持水合触发条件
- @for / @if：原生控制流，@for 要求提供 track
- 默认独立组件：无需再写 standalone: true
- Host bindings：用 host 对象替代 @HostBinding 装饰器
- 函数式拦截器：更简单的 HTTP 拦截器
- takeUntilDestroyed：内置订阅清理
- 增量水合：@defer (hydrate on ...) 用于 SSR
规则分类与优先级
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 变更检测 | CRITICAL | change- |
| 2 | 打包与懒加载 | CRITICAL | bundle- |
| 3 | RxJS 优化 | HIGH | rxjs- |
| 4 | 模板性能 | HIGH | template- |
| 5 | 依赖注入 | MEDIUM-HIGH | di- |
| 6 | HTTP 与缓存 | MEDIUM | http- |
| 7 | 表单优化 | MEDIUM | forms- |
| 8 | 通用性能 | LOW-MEDIUM | ssr- |
快速参考
1. 变更检测（CRITICAL）
- change-signals：使用 Signals 替代 BehaviorSubject 管理响应式状态
- change-onpush：使用 OnPush 变更检测策略
- change-detach-reattach：对重操作分离变更检测器
- change-run-outside-zone：在 NgZone 之外运行非 UI 代码
- component-signal-io：使用 signal inputs/outputs 替代 @Input/@Output 装饰器
- signal-computed-pure：保持 computed() 纯净，无副作用
- signal-effect-patterns：正确使用 effect()，避免反模式
- signal-linkedsignal：使用 linkedSignal 处理派生且可写状态
2. 打包与懒加载（CRITICAL）
- bundle-standalone：使用独立组件（v20+ 默认）
- bundle-lazy-routes：用 loadComponent/loadChildren 懒加载路由
- bundle-defer：对重型组件使用 @defer 块
- bundle-preload：在悬停/聚焦时预加载路由以提升感知速度
- bundle-no-barrel-imports：避免 barrel 文件，使用直接导入
3. RxJS 优化（HIGH）
- rxjs-async-pipe：使用 async 管道替代手动订阅
- rxjs-takeuntil：使用 takeUntilDestroyed 自动清理
- rxjs-share-replay：共享 observable 以避免重复请求
- rxjs-operators：使用高效的 RxJS 操作符
- rxjs-mapping-operators：使用正确的映射操作符（switchMap 与 exhaustMap）
- rxjs-no-nested-subscribe：避免嵌套订阅
4. 模板性能（HIGH）
- template-trackby：在 @for 循环中使用 track 函数（v20+ 必需）
- template-pure-pipes：对昂贵转换使用纯管道
- template-ng-optimized-image：使用 NgOptimizedImage 优化图片
- template-no-function-calls：避免在模板中调用函数
- template-virtual-scroll：对大型列表使用虚拟滚动
5. 依赖注入（MEDIUM-HIGH）
- di-provided-in-root：对单例服务使用 providedIn: 'root'
- di-injection-token：对非类依赖使用 InjectionToken
- di-factory-providers：对复杂初始化使用工厂提供者
- directive-host-composition：使用 hostDirectives 进行组合
6. HTTP 与缓存（MEDIUM）
- http-resource：使用 httpResource/resource 进行基于 Signal 的数据获取
- http-interceptors：使用函数式拦截器处理横切关注点
- http-transfer-state：使用 TransferState 进行 SSR 水合
- routing-signal-inputs：使用基于 Signal 的路由输入
7. 表单优化（MEDIUM）
- forms-reactive：使用带类型 FormGroup 的响应式表单
8. 通用性能（LOW-MEDIUM）
- ssr-hydration：使用 @defer (hydrate on ...) 进行增量水合
- perf-memory-leaks：防止内存泄漏（定时器、监听器、订阅）
- perf-web-workers：将重计算卸载到 Web Workers
- arch-smart-dumb-components：使用智能/哑组件模式
使用方式
阅读各规则文件以获取详细说明和代码示例：
- rules/change-signals.md
- rules/bundle-defer.md
- rules/http-resource.md
每个规则文件包含：
- 为何重要的简要说明
- 带说明的错误代码示例
- 带说明的正确代码示例
- 额外上下文与参考
完整编译文档
如需包含所有规则展开的完整指南：AGENTS.md
限制
资料未提供该指南的收费、价格、平台支持范围或具体使用效果等信息。