mcpField
A
angular-best-practices-legacy

angular-best-practices-legacy

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

关于 angular-best-practices-legacy

面向维护 Angular 12–16、采用 NgModules 和 RxJS 的开发者的性能参考 Skill。规则按优先级覆盖八个领域，并提供代码示例，支持审查与重构。

主要功能

  1. 0130 多条性能规则，按优先级排列
  2. 02涵盖八类优化主题
  3. 03NgModule 与懒加载指南
  4. 04RxJS 与订阅管理模式
  5. 05规则文件附代码示例

适用场景

  1. 01维护 Angular 12–16 应用
  2. 02审查代码中的性能问题
  3. 03重构 RxJS 订阅
  4. 04优化模板与懒加载路由

安装

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

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

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

包含的文件

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

AGENTS.md
metadata.json
rules/
_sections.md
bundle-lazy-routes.md
bundle-ngmodule.md
bundle-preload.md
bundle-scam.md
change-rxjs-state.md
di-factory-providers.md
di-injection-token.md
di-provided-in-root.md
forms-reactive.md
forms-typed.md
http-interceptors.md
http-transfer-state.md
rxjs-async-pipe.md
rxjs-takeuntil.md
template-ng-optimized-image.md
template-pure-pipes.md
template-trackby.md

详细介绍

Angular 最佳实践（旧版：v12-16）

面向使用基于 NgModule 的架构和以 RxJS 为核心模式的 Angular 12-16 应用的全面性能优化指南。包含 8 个类别中的 30 多条规则，并按影响排序，以指导自动重构和代码生成。

适用场景

在以下场景中参考这些指南：

  • 维护 Angular 12-16 代码库
  • 使用基于 NgModule 的架构
  • 使用 *ngIf、*ngFor 指令
  • 使用 RxJS 管理状态
  • 使用基于类的 HTTP 拦截器
  • 审查代码中的性能问题

关键模式（v12-16）

  • NgModules - 使用功能模块组织代码
  • BehaviorSubject - 响应式状态管理
  • Subject + takeUntil - 订阅清理模式
  • 基于类的拦截器 - 使用 implements HttpInterceptor 处理 HTTP
  • **ngFor / ngIf - 配合 trackBy 使用结构型指令
  • loadChildren - 基于模块的延迟加载

按优先级划分的规则类别

优先级类别影响前缀
1变更检测CRITICALchange-
2打包与延迟加载CRITICALbundle-
3RxJS 优化HIGHrxjs-
4模板性能HIGHtemplate-
5依赖注入MEDIUM-HIGHdi-
6HTTP 与缓存MEDIUMhttp-
7表单优化MEDIUMforms-
8通用性能LOW-MEDIUMperf-

快速参考

1. 变更检测（CRITICAL）
  • change-rxjs-state - 对响应式状态使用 BehaviorSubject 和 OnPush
  • change-onpush - 使用 OnPush 变更检测策略
  • change-detach-reattach - 对耗时操作分离变更检测器
  • change-run-outside-zone - 在 NgZone 外运行非 UI 代码
2. 打包与延迟加载（CRITICAL）
  • bundle-ngmodule - 将代码组织到功能 NgModules 中
  • bundle-scam - 使用单组件 Angular 模块模式
  • bundle-lazy-routes - 使用 loadChildren 延迟加载路由
  • bundle-preload - 预加载路由，提升感知速度
  • bundle-no-barrel-imports - 避免使用 barrel 文件，改用直接导入
3. RxJS 优化（HIGH）
  • rxjs-async-pipe - 使用 async 管道代替手动订阅
  • rxjs-takeuntil - 使用 takeUntil 和 destroy$ Subject 清理订阅
  • rxjs-share-replay - 共享 Observable，避免重复请求
  • rxjs-operators - 使用高效的 RxJS 操作符
  • rxjs-mapping-operators - 使用正确的映射操作符（switchMap 与 exhaustMap）
  • rxjs-no-nested-subscribe - 避免嵌套订阅
4. 模板性能（HIGH）
  • template-trackby - 在 *ngFor 中使用 trackBy 函数
  • 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 - 对复杂初始化使用工厂提供程序
6. HTTP 与缓存（MEDIUM）
  • http-interceptors - 使用基于类的拦截器处理横切关注点
  • http-transfer-state - 使用 TransferState 进行 SSR 水合
7. 表单优化（MEDIUM）
  • forms-reactive - 使用响应式表单，而非模板驱动表单
  • forms-typed - 使用类型化 FormGroup 确保类型安全
8. 通用性能（LOW-MEDIUM）
  • perf-memory-leaks - 防止内存泄漏（计时器、监听器、订阅）
  • perf-web-workers - 将繁重计算交给 Web Workers 处理
  • arch-smart-dumb-components - 使用 Smart/Dumb 组件模式

使用方法

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

rules/change-rxjs-state.md
rules/bundle-ngmodule.md
rules/rxjs-takeuntil.md

每个规则文件都包含：

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

完整编译文档

如需查看包含所有展开规则的完整指南：AGENTS.md

评论

支持 Markdown