mcpField
A
angular-best-practices-v20

angular-best-practices-v20

github.com/develite98开发19335 次安装38 周前更新
代码仓库

关于 angular-best-practices-v20

面向 Angular 20 及以上版本应用的性能优化指南，供开发、重构和代码审查时参考。指南按优先级组织 8 类规则，覆盖 Signals、惰性加载、模板和 SSR 等现代特性。

主要功能

  1. 01按优先级整理 8 类优化规则
  2. 02Signals 与信号式输入输出
  3. 03惰性加载和 @defer
  4. 04RxJS 与订阅清理
  5. 05模板性能和原生控制流
  6. 06HTTP、表单及 SSR 优化

适用场景

  1. 01编写 Angular 20+ 组件
  2. 02优化 Angular 应用性能
  3. 03审查 Signals 或 RxJS 用法
  4. 04改进 SSR 与渐进式水合

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/develite98/angular-best-practices --skill angular-best-practices-v20

安装后在 Claude Code 中输入/angular-best-practices-v20确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
metadata.json
rules/
_sections.md
bundle-defer-third-party.md
bundle-defer.md
bundle-lazy-routes.md
bundle-preload.md
bundle-standalone.md
change-signals.md
component-signal-io.md
di-factory-providers.md
di-injection-token.md
di-provided-in-root.md
directive-host-composition.md
forms-reactive.md
http-interceptors.md
http-resource.md
http-transfer-state.md
routing-signal-inputs.md
rxjs-async-pipe.md
rxjs-takeuntil.md
signal-computed-pure.md
signal-effect-patterns.md
signal-linkedsignal.md
ssr-hydration.md
template-ng-optimized-image.md
template-pure-pipes.md
template-trackby.md

详细介绍

Angular 最佳实践（v20+）

Angular 20+ 应用的综合性能优化指南，涵盖 Signals、httpResource、信号输入/输出、@defer 块和原生控制流语法等现代功能。包含 8 个类别中的 35+ 条规则，按影响程度排序，以指导自动化重构和代码生成。

适用场景

在以下情况下参考这些指南：

  • 编写新的 Angular 20+ 组件
  • 使用 Signals 管理响应式状态（signal、computed、linkedSignal、effect）
  • 使用 httpResource/resource 获取数据
  • 使用信号输入/输出替代装饰器
  • 使用 @defer 实现延迟加载
  • 使用原生控制流（@if、@for、@switch）
  • 使用增量水合实现 SSR
  • 检查代码中的性能问题

主要功能（v20+）

  • Signals - 细粒度响应式（signal、computed、linkedSignal、effect）
  • httpResource - 基于信号的 HTTP，自动管理加载状态
  • 信号输入/输出 - 使用 input()、output() 替代装饰器
  • @defer - 模板级延迟加载，支持水合触发器
  • @for / @if - 原生控制流，必须指定 track
  • 默认独立模式 - 无需设置 standalone: true
  • 宿主绑定 - 使用 host 对象替代 @HostBinding 装饰器
  • 函数式拦截器 - 更简洁的 HTTP 拦截器
  • takeUntilDestroyed - 内置订阅清理
  • 增量水合 - 用于 SSR 的 @defer (hydrate on ...)

按优先级划分的规则类别

优先级类别影响前缀
1变更检测严重change-
2打包与延迟加载严重bundle-
3RxJS 优化高rxjs-
4模板性能高template-
5依赖注入中高di-
6HTTP 与缓存中http-
7表单优化中forms-
8通用性能低中ssr-

快速参考

1. 变更检测（严重）
  • change-signals - 使用 Signals 而非 BehaviorSubject 管理响应式状态
  • change-onpush - 使用 OnPush 变更检测策略
  • change-detach-reattach - 对高开销操作分离变更检测器
  • change-run-outside-zone - 在 NgZone 外运行非 UI 代码
  • component-signal-io - 使用信号输入/输出替代 @Input/@Output 装饰器
  • signal-computed-pure - 保持 computed() 纯净，不产生副作用
  • signal-effect-patterns - 正确使用 effect()，避免反模式
  • signal-linkedsignal - 使用 linkedSignal 管理派生且可写的状态
2. 打包与延迟加载（严重）
  • bundle-standalone - 使用独立组件（v20+ 中为默认模式）
  • bundle-lazy-routes - 使用 loadComponent/loadChildren 延迟加载路由
  • bundle-defer - 对高开销组件使用 @defer 块
  • bundle-preload - 在悬停/聚焦时预加载路由，提升感知速度
  • bundle-no-barrel-imports - 避免使用 barrel 文件，改用直接导入
3. RxJS 优化（高）
  • rxjs-async-pipe - 使用 async 管道替代手动订阅
  • rxjs-takeuntil - 使用 takeUntilDestroyed 自动清理
  • rxjs-share-replay - 共享可观察对象，避免重复请求
  • rxjs-operators - 使用高效的 RxJS 操作符
  • rxjs-mapping-operators - 使用正确的映射操作符（switchMap 与 exhaustMap）
  • rxjs-no-nested-subscribe - 避免嵌套订阅
4. 模板性能（高）
  • template-trackby - 在 @for 循环中使用 track 函数（v20+ 中为必需）
  • template-pure-pipes - 使用纯管道执行高开销转换
  • template-ng-optimized-image - 使用 NgOptimizedImage 优化图像
  • template-no-function-calls - 避免在模板中调用函数
  • template-virtual-scroll - 对大型列表使用虚拟滚动
5. 依赖注入（中高）
  • di-provided-in-root - 单例服务使用 providedIn: 'root'
  • di-injection-token - 非类依赖项使用 InjectionToken
  • di-factory-providers - 复杂初始化使用工厂提供者
  • directive-host-composition - 使用 hostDirectives 进行组合
6. HTTP 与缓存（中）
  • http-resource - 使用 httpResource/resource 进行基于信号的数据获取
  • http-interceptors - 使用函数式拦截器处理横切关注点
  • http-transfer-state - 使用 TransferState 进行 SSR 水合
  • routing-signal-inputs - 使用基于信号的路由输入
7. 表单优化（中）
  • forms-reactive - 使用带类型的 FormGroup 构建响应式表单
8. 通用性能优化（低至中）
  • ssr-hydration - 使用 @defer 进行增量水合（在……时水合）
  • perf-memory-leaks - 防止内存泄漏（计时器、监听器、订阅）
  • perf-web-workers - 将繁重的计算任务转移到 Web Workers
  • arch-smart-dumb-components - 使用 Smart/Dumb 组件模式

使用方法

阅读各规则文件，了解详细说明和代码示例：

rules/change-signals.md
rules/bundle-defer.md
rules/http-resource.md

每个规则文件都包含：

  • 简要说明其重要性
  • 错误代码示例及说明
  • 正确代码示例及说明
  • 补充背景信息和参考资料

完整汇编文档

如需查看包含所有详细规则的完整指南，请参阅：AGENTS.md

评论

支持 Markdown