angular-best-practices
优化 Angular 性能
Angular 应用程序通常由于低效的变更检测、捆绑包膨胀和渲染瓶颈而出现性能问题。本技能提供优先最佳实践来优化 Angular 应用的速度和效率。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“angular-best-practices”。 Review this component for performance: @Component({ template: `<div>{{ data.name }}</div>` }) export class MyComponent { data = { name: 'test' }; }
预期结果:
- CRITICAL：使用 OnPush 变更检测策略以减少不必要的重新渲染
- 将可变属性替换为 Signal 以实现细粒度响应性：data = signal({ name: 'test' })
- 在任何 *ngFor 循环中使用 trackBy 以优化 DOM 更新
正在使用“angular-best-practices”。 How can I optimize bundle size in my Angular app?
预期结果:
- 1. 懒加载路由 - 对功能模块使用 loadChildren()
- 2. 动态导入 - 按需加载重量级库：await import('chart.js')
- 3. @defer 块 - 延迟非关键组件：@defer (on viewport)
- 4. 避免 Barrel 文件 - 直接从源文件导入，而不是 index 导出
- 5. NgOptimizedImage - 使用内置图像优化指令
安全审计
安全Static analysis flagged 107 potential issues, but all are false positives. The skill is pure documentation about Angular best practices. Code block backticks were misidentified as shell execution, dynamic imports are legitimate Angular lazy loading patterns, and URLs are documentation links. No malicious code or security risks present.
质量评分
你能构建什么
新 Angular 组件开发
在创建新 Angular 组件时使用，确保从一开始就遵循性能最佳实践，包括 OnPush 策略和 Signals。
性能代码审查
在审查现有 Angular 代码时使用，以识别性能瓶颈并获得具体的重构建议。
Angular 升级优化
在将 Angular 应用程序迁移到更新版本时使用，以利用最新的性能功能，如 Zoneless 和增量水合。
试试这些提示
审查此 Angular 组件的性能问题。检查 OnPush 变更检测、Signals 的正确使用以及订阅中的任何内存泄漏。
```typescript
{{CODE}}```分析此 Angular 应用程序的捆绑包大小优化机会。查找：
1. 可以懒加载的路由
2. 可以动态导入的重量级库
3. 导致 tree-shaking 问题的 Barrel 文件导入
4. 可以使用 @defer 的组件
```typescript
{{CODE}}```审查此 Angular 设置的服务器端渲染性能。检查： 1. 适当的水合配置 2. 使用 TransferState 防止重复请求 3. 关键内容与延迟内容的分离 4. SSR 中的任何阻塞操作
对此 Angular 代码执行完整的性能审计。按优先级（Critical、High、Medium、Low）对发现进行分类，并为以下方面提供具体建议： - 变更检测策略 - 数据获取模式 - 模板优化 - 内存管理 - 捆绑包结构
最佳实践
- 始终为新组件使用 ChangeDetectionStrategy.OnPush 与 Signals - 这提供最大的性能提升
- 优先使用 forkJoin 和 switchMap 而不是嵌套订阅，以消除异步瀑布
- 对初始视口中不需要的任何组件使用 @defer，以减少初始捆绑包大小
避免
- 避免对可变属性使用默认变更检测 - 会导致不必要的重新渲染
- 避免在 RxJS 中嵌套订阅 - 会导致异步瀑布和内存泄漏
- 避免急切加载所有路由 - 会使初始捆绑包膨胀并减慢可交互时间