angular-best-practices
Angular性能优化与最佳实践指南。适用于编写、审查或重构Angular代码时，以实现最佳性能、最小化打包体积和提升渲染效率。
作者
分类
开发工具安装
下载并解压到你的 skills 目录
复制命令，发送给 OpenClaw 自动安装：
Angular Best Practices - Angular 性能优化与代码审查指南
技能概述
Angular Best Practices 是一套完整的 Angular 应用性能优化指南，提供按优先级排序的最佳实践规则，帮助开发者在编写、审查和重构 Angular 代码时消除性能瓶颈、优化打包体积并提升渲染效率。
适用场景
1. 编写和开发 Angular 组件
当你开发新的 Angular 组件或页面时，该指南提供了从变更检测策略、状态管理到模板优化的完整规范。包括使用 OnPush 策略、Signals 响应式编程、独立组件模式等现代 Angular 开发最佳实践，确保新代码从一开始就具备高性能基因。
2. 代码审查与性能评审
在团队代码审查环节，该指南可作为检查清单，帮助识别可能导致性能问题的代码模式。涵盖异步操作瀑布流问题、不必要的重新渲染、内存泄漏风险点等常见性能陷阱，让代码审查更加系统化和高效。
3. 现有项目重构优化
对于需要优化的现有 Angular 应用，该指南提供了清晰的问题诊断和解决方案优先级。从变更检测优化（最高优先级）到内存管理（较低优先级），帮助团队按影响程度排序优化任务，最大化投入产出比。
核心功能
1. 按优先级分类的性能规则库
指南包含 8 大类、共 40+ 条性能优化规则，按影响程度分为 CRITICAL、HIGH、MEDIUM、LOW-MEDIUM 四个等级。最高优先级聚焦变更检测（Signals、OnPush、Zoneless）、异步瀑布流消除和打包优化，这些都是对 Angular 应用性能影响最大的领域。每个规则都包含正确和错误代码示例对比，直观展示最佳实践。
2. 现代Angular开发模式指导
全面覆盖 Angular 17+ 的新特性最佳实践，包括：
3. SSR 和渲染性能专项优化
针对服务端渲染场景，提供 TransferState 数据传递、增量水合配置、关键内容优先渲染等专门方案。对于客户端渲染，包含虚拟滚动、trackBy 优化、纯 Pipe 使用等列表渲染性能提升技巧，确保大列表场景下的流畅体验。
常见问题
Angular 性能优化应该从哪里开始？
建议优先从变更检测优化入手，这是影响 Angular 应用性能最大的因素。具体措施包括：为所有组件启用 OnPush 变更检测策略、使用 Signals 替代可变属性、避免嵌套订阅造成的异步瀑布流。这三项优化对性能提升最为显著，且实施成本相对较低。完成后再考虑路由懒加载、第三方库动态导入等打包优化措施。
什么时候应该使用 Angular OnPush 变更检测？
几乎所有组件都应该使用 OnPush 策略。特别适合的场景包括：纯展示型组件（接收输入并渲染）、使用 Signals 管理状态的组件、配合 @for 列表渲染的组件。唯一可能需要默认策略的情况是组件内部直接修改了对象属性（不推荐这种做法）。OnPush 配合 Signals 可以实现精确的局部更新，大幅减少不必要的变更检测遍历。
Angular Signals 和 RxJS 应该如何选择？
Signals 更适合组件内部的状态管理和 UI 响应式更新，具有自动追踪依赖、无需手动清理的优势。RxJS 则更适合处理复杂的异步操作流、API 调用链、事件流处理等场景。最佳实践是：组件状态用 Signals，数据获取和复杂异步逻辑用 RxJS，通过 toSignal() 在组件边界进行桥接。两者并非互斥，而是互补关系。
该指南是否适用于旧版本 Angular 项目？
指南的核心原则适用于大多数 Angular 版本，但部分新特性（如 Signals、新控制流、@defer）需要 Angular 16+ 版本。对于旧版本项目，仍可应用 OnPush、路由懒加载、trackBy、虚拟滚动等经典优化方案。建议在升级到支持 Signals 的版本后，逐步迁移到现代响应式编程模式。
Zoneless 模式是否已经可用于生产环境？
Zoneless 是 Angular 的实验性功能，正在快速成熟中。它通过移除 zone.js 异步补丁，可减少约 15KB 打包体积并提升运行时性能。对于新项目（Angular 17+），可以尝试启用 Zoneless 模式，但需要确保所有依赖和第三方库与 Zoneless 兼容。对于现有生产项目，建议等待该特性更加稳定后再考虑迁移。
如何检测 Angular 应用的性能问题？
Angular DevTools 浏览器插件是官方推荐的性能分析工具，可以可视化变更检测周期、Profiler 性能分析。常见性能问题迹象包括：列表滚动卡顿、打包体积超过 1MB、首屏加载超过 3 秒、CPU 占用持续偏高。该指南的"快速检查清单"提供了代码审查时需要关注的重点，可以作为性能健康检查的起点。