Angular性能优化和最佳实践指南。用于编写、审查或重构Angular代码以获得最佳性能、包大小和渲染效率。下载地址Skill下载地址https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/angular-best-practices技能概述angular-best-practices 技能是一个全面的Angular应用性能优化指南包含消除性能瓶颈、优化包大小和改善渲染的优先级规则。该技能提供了从变更检测到内存管理的完整最佳实践体系。主要功能变更检测优化使用OnPush策略、Signals和Zoneless模式优化变更检测异步操作优化消除异步瀑布流优化RxJS模式和SSR预加载包优化通过懒加载、摇树优化和动态导入减小包大小渲染性能使用defer、trackBy和虚拟滚动提升渲染效率服务端渲染配置增量水合、预渲染和TransferState模板优化使用新的控制流语法和管道优化模板状态管理使用Signal模式和选择器优化状态管理内存管理正确清理订阅和防止内存泄漏触发条件在以下情况下应该使用此技能编写新的Angular组件或页面实现数据获取模式审查代码性能问题重构现有Angular代码优化包大小或加载时间配置SSR/水合优先级分类优先级类别影响重点1变更检测关键Signals、OnPush、Zoneless2异步瀑布流关键RxJS模式、SSR预加载3包优化关键懒加载、摇树优化4渲染性能高defer、trackBy、虚拟化5服务端渲染高水合、预渲染6模板优化中等控制流、管道7状态管理中等Signal模式、选择器8内存管理低-中等清理、订阅处理过程1. 变更检测优化关键使用OnPush变更检测策略Component({ changeDetection: ChangeDetectionStrategy.OnPush, template: div{{ count() }}/div, }) export class CounterComponent { count signal(0); }2. 异步操作优化关键消除顺序数据获取forkJoin({ user: this.userService.getUser(id), posts: this.postsService.getPosts(id), }).subscribe((data) { // 并行获取 });3. 包优化关键懒加载路由export const routes: Routes [ { path: admin, loadChildren: () import(./admin/admin.routes).then((m) m.ADMIN_ROUTES), }, ];4. 渲染性能高使用trackBy和虚拟滚动for (item of items(); track item.id) { app-item-card [item]item / }5. 服务端渲染高配置增量水合export const appConfig: ApplicationConfig { providers: [ provideClientHydration( withIncrementalHydration(), withEventReplay() ), ], };快速参考检查清单新组件changeDetection: ChangeDetectionStrategy.OnPushstandalone: true使用Signals管理状态signal()、input()、output()使用inject()注入依赖for使用track表达式性能审查模板中没有方法调用使用管道或computed大列表已虚拟化重型组件已延迟路由已懒加载第三方库动态导入SSR检查水合已配置关键内容优先渲染非关键内容使用defer (hydrate on ...)服务器获取的数据使用TransferState最佳实践核心原则优先使用Signals而非可变属性使用OnPush变更检测策略避免模板中的方法调用使用trackBy优化列表渲染懒加载路由和组件正确管理订阅防止内存泄漏相关资源Angular Performance GuideZoneless AngularAngular SSR GuideChange Detection Deep Dive使用限制仅在任务明确匹配上述范围时使用此技能不要将输出视为环境特定验证、测试或专家审查的替代品如果缺少所需输入、权限、安全边界或成功标准请停止并寻求澄清