
关于
Angular 性能优化和最佳实践指南。在编写、审查或重构 Angular 代码时使用。
name: angular-best-practices description: "Angular性能优化和最佳实践指南。在编写、审查或重构Angular代码以获得最佳性能、包大小和渲染效率时使用。" risk: safe source: self date_added: "2026-02-27"
Angular 最佳实践
Angular应用程序的综合性能优化指南。包含消除性能瓶颈、优化包和改善渲染的优先级规则。
何时使用
在以下情况参考这些指南:
- 编写新的Angular组件或页面
- 实现数据获取模式
- 审查代码的性能问题
- 重构现有Angular代码
- 优化包大小或加载时间
- 配置SSR/水合
规则类别(按优先级)
| 优先级 | 类别 | 影响 | 重点 | |--------|------|------|------| | 1 | 变更检测 | 关键 | Signals、OnPush、Zoneless | | 2 | 异步瀑布 | 关键 | RxJS模式、SSR预加载 | | 3 | 包优化 | 关键 | 懒加载、树摇 | | 4 | 渲染性能 | 高 | @defer、trackBy、虚拟化 | | 5 | 服务端渲染 | 高 | 水合、预渲染 | | 6 | 模板优化 | 中 | 控制流、管道 | | 7 | 状态管理 | 中 | Signal模式、选择器 | | 8 | 内存管理 | 低-中 | 清理、订阅 |
1. 变更检测(关键)
使用OnPush变更检测
// 正确 - OnPush + Signals
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div>{{ count() }}</div>`,
})
export class CounterComponent {
count = signal(0);
}
// 错误 - 默认变更检测
@Component({
template: `<div>{{ count }}</div>`,
})
export class CounterComponent {
count = 0;
}
使用Signals替代传统属性
// 正确
readonly items = signal<Item[]>([]);
readonly filteredItems = computed(() =>
this.items().filter(i => i.active)
);
// 错误
items: Item[] = [];
get filteredItems() {
return this.items.filter(i => i.active);
}
2. 异步瀑布(关键)
避免嵌套订阅
// 正确 - switchMap
this.route.params.pipe(
switchMap(params => this.service.getData(params.id))
).subscribe(data => this.data.set(data));
// 错误 - 嵌套订阅
this.route.params.subscribe(params => {
this.service.getData(params.id).subscribe(data => {
this.data = data;
});
});
3. 包优化(关键)
路由级懒加载
export const routes: Routes = [
{
path: 'dashboard',
loadComponent: () => import('./dashboard/dashboard.component')
.then(m => m.DashboardComponent)
}
];
4. 渲染性能
使用@defer延迟加载
@defer (on viewport) {
<heavy-component />
} @placeholder {
<skeleton-loader />
}
trackBy优化列表
@for (item of items(); track item.id) {
<item-card [item]="item" />
}
兼容工具
Claude CodeCursor
标签
前端开发