angular-best-practices-v20 by develite98/angular-best-practices
npx skills add https://github.com/develite98/angular-best-practices --skill angular-best-practices-v20适用于 Angular 20+ 应用程序的全面性能优化指南,涵盖 Signals、httpResource、信号输入/输出、@defer 块和原生控制流语法等现代特性。包含 8 大类 35 条以上的规则,按影响优先级排序,以指导自动化重构和代码生成。
在以下情况下参考这些指南:
standalone: true广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 变更检测 | 关键 | change- |
| 2 | 打包与懒加载 | 关键 | bundle- |
| 3 | RxJS 优化 | 高 | rxjs- |
| 4 | 模板性能 | 高 | template- |
| 5 | 依赖注入 | 中高 | di- |
| 6 | HTTP 与缓存 | 中 | http- |
| 7 | 表单优化 | 中 | forms- |
| 8 | 通用性能 | 低中 | ssr- |
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 处理派生和可写状态bundle-standalone - 使用独立组件(v20+ 默认)bundle-lazy-routes - 使用 loadComponent/loadChildren 懒加载路由bundle-defer - 对重型组件使用 @defer 块bundle-preload - 在悬停/聚焦时预加载路由以提升感知速度bundle-no-barrel-imports - 避免使用桶文件,采用直接导入rxjs-async-pipe - 使用 async 管道替代手动订阅rxjs-takeuntil - 使用 takeUntilDestroyed 自动清理订阅rxjs-share-replay - 共享 Observable 以避免重复请求rxjs-operators - 使用高效的 RxJS 操作符rxjs-mapping-operators - 使用正确的映射操作符(switchMap vs exhaustMap)rxjs-no-nested-subscribe - 避免嵌套订阅template-trackby - 在 @for 循环中使用 track 函数(v20+ 必需)template-pure-pipes - 对开销大的转换使用纯管道template-ng-optimized-image - 使用 NgOptimizedImage 优化图片template-no-function-calls - 避免在模板中调用函数template-virtual-scroll - 对大型列表使用虚拟滚动di-provided-in-root - 对单例服务使用 providedIn: 'root'di-injection-token - 对非类依赖使用 InjectionTokendi-factory-providers - 对复杂初始化使用工厂提供者directive-host-composition - 使用 hostDirectives 进行组合http-resource - 使用 httpResource/resource 进行基于信号的数据获取http-interceptors - 使用函数式拦截器处理横切关注点http-transfer-state - 使用 TransferState 进行 SSR 水合routing-signal-inputs - 使用基于信号的路由输入forms-reactive - 使用带类型的 FormGroup 实现响应式表单ssr-hydration - 使用 @defer (hydrate on ...) 实现增量水合perf-memory-leaks - 防止内存泄漏(定时器、监听器、订阅)perf-web-workers - 将繁重计算卸载到 Web Workersarch-smart-dumb-components - 使用智能/展示组件模式阅读各个规则文件以获取详细解释和代码示例:
rules/change-signals.md
rules/bundle-defer.md
rules/http-resource.md
每个规则文件包含:
如需查看包含所有规则详解的完整指南:AGENTS.md
每周安装量
238
代码仓库
GitHub 星标数
19
首次出现
2026年1月27日
安全审计
安装于
github-copilot212
codex211
opencode209
gemini-cli209
amp194
kimi-cli194
Comprehensive performance optimization guide for Angular 20+ applications with modern features like Signals, httpResource, signal inputs/outputs, @defer blocks, and native control flow syntax. Contains 35+ rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Change Detection | CRITICAL | change- |
| 2 | Bundle & Lazy Loading | CRITICAL | bundle- |
| 3 | RxJS Optimization | HIGH | rxjs- |
| 4 | Template Performance | HIGH | template- |
| 5 | Dependency Injection |
change-signals - Use Signals instead of BehaviorSubject for reactive statechange-onpush - Use OnPush change detection strategychange-detach-reattach - Detach change detector for heavy operationschange-run-outside-zone - Run non-UI code outside NgZonecomponent-signal-io - Use signal inputs/outputs instead of @Input/@Output decoratorssignal-computed-pure - Keep computed() pure, no side effectssignal-effect-patterns - Use effect() correctly, avoid anti-patternssignal-linkedsignal - Use linkedSignal for derived + writable statebundle-standalone - Use standalone components (default in v20+)bundle-lazy-routes - Lazy load routes with loadComponent/loadChildrenbundle-defer - Use @defer blocks for heavy componentsbundle-preload - Preload routes on hover/focus for perceived speedbundle-no-barrel-imports - Avoid barrel files, use direct importsrxjs-async-pipe - Use async pipe instead of manual subscriptionsrxjs-takeuntil - Use takeUntilDestroyed for automatic cleanuprxjs-share-replay - Share observables to avoid duplicate requestsrxjs-operators - Use efficient RxJS operatorsrxjs-mapping-operators - Use correct mapping operators (switchMap vs exhaustMap)rxjs-no-nested-subscribe - Avoid nested subscriptionstemplate-trackby - Use track function in @for loops (required in v20+)template-pure-pipes - Use pure pipes for expensive transformationstemplate-ng-optimized-image - Use NgOptimizedImage for image optimizationtemplate-no-function-calls - Avoid function calls in templatestemplate-virtual-scroll - Use virtual scrolling for large listsdi-provided-in-root - Use providedIn: 'root' for singleton servicesdi-injection-token - Use InjectionToken for non-class dependenciesdi-factory-providers - Use factory providers for complex initializationdirective-host-composition - Use hostDirectives for compositionhttp-resource - Use httpResource/resource for signal-based data fetchinghttp-interceptors - Use functional interceptors for cross-cutting concernshttp-transfer-state - Use TransferState for SSR hydrationrouting-signal-inputs - Use signal-based route inputsforms-reactive - Use reactive forms with typed FormGroupssr-hydration - Use incremental hydration with @defer (hydrate on ...)perf-memory-leaks - Prevent memory leaks (timers, listeners, subscriptions)perf-web-workers - Offload heavy computation to Web Workersarch-smart-dumb-components - Use Smart/Dumb component patternRead individual rule files for detailed explanations and code examples:
rules/change-signals.md
rules/bundle-defer.md
rules/http-resource.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md
Weekly Installs
238
Repository
GitHub Stars
19
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykWarn
Installed on
github-copilot212
codex211
opencode209
gemini-cli209
amp194
kimi-cli194
Vue.js测试最佳实践:Vue 3组件、组合式函数、Pinia与异步测试完整指南
3,700 周安装
| MEDIUM-HIGH |
di- |
| 6 | HTTP & Caching | MEDIUM | http- |
| 7 | Forms Optimization | MEDIUM | forms- |
| 8 | General Performance | LOW-MEDIUM | ssr- |