Giới thiệu
Hiệu suất ứng dụng web là yếu tố quan trọng để giữ chân người dùng trong thời đại công nghệ ngày nay. Khi phát triển ứng dụng với Angular, việc tối ưu hóa hiệu suất không chỉ giúp tăng tốc độ tải trang mà còn cải thiện trải nghiệm người dùng.
Bài viết này sẽ giới thiệu cho bạn 10 kỹ thuật tối ưu hiệu suất trong Angular, giúp bạn xây dựng những ứng dụng mạnh mẽ và mượt mà hơn. Hãy cùng khám phá những mẹo hữu ích này!
1. Sử Dụng Chiến Lược Change Detection Hợp Lý
Angular sử dụng cơ chế Change Detection để cập nhật giao diện khi có sự thay đổi dữ liệu. Để tối ưu hoá, bạn có thể sử dụng ChangeDetectionStrategy.OnPush để giảm số lần kiểm tra.
Ví dụ
typescript
@Component({
selector: 'app-child',
template: `{{ data }}`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
@Input() data: any;
}Lợi ích của cách này là giảm thiểu số lần chạy Change Detection, giúp ứng dụng nhanh hơn rất nhiều.
2. Tối Ưu Danh Sách Với trackBy Trong ngFor
Khi sử dụng *ngFor, bạn nên áp dụng trackBy để tránh render lại toàn bộ danh sách khi chỉ có một phần tử thay đổi.
Ví dụ
typescript
<li *ngFor="let item of items; trackBy: trackByFn">
{{ item.name }}
</li>
trackByFn(index: number, item: any): number {
return item.id;
}Điều này giúp Angular chỉ cập nhật các phần tử thực sự thay đổi, giảm thiểu thao tác DOM.
3. Hạn Chế Change Detection Với NgZone.runOutsideAngular
Trong những trường hợp như sự kiện cuộn hoặc animation, bạn có thể chạy chúng ngoài vùng quản lý của Angular để tối ưu hóa hiệu suất.
Ví dụ
typescript
import { Component, NgZone } from '@angular/core';
@Component({
selector: 'app-example',
template: `<div (click)="doSomething()">Click me</div>`
})
export class ExampleComponent {
constructor(private ngZone: NgZone) {}
ngOnInit() {
this.ngZone.runOutsideAngular(() => {
window.addEventListener('scroll', () => {
console.log('User is scrolling...');
});
});
}
}Cách này giúp Angular không kích hoạt Change Detection khi có sự kiện xảy ra, giữ cho ứng dụng mượt mà hơn.
4. Tránh Gọi Hàm Trực Tiếp Trong Template
Khi bạn gọi hàm trực tiếp trong template, hàm đó sẽ được thực thi nhiều lần không cần thiết.
Ví dụ
typescript
<div>{{ value }}</div>
export class ExampleComponent {
value: number;
ngOnInit() {
this.value = this.calculateValue();
}
calculateValue(): number {
return Math.random() * 100;
}
}Bằng cách lưu trữ kết quả vào biến, bạn chỉ cần gọi hàm một lần, giúp cải thiện hiệu suất.
5. Áp Dụng Lazy Loading Để Tối Ưu Tải Trang
Lazy loading giúp bạn chỉ tải module khi cần thiết, giảm kích thước ban đầu của ứng dụng.
Ví dụ
typescript
const routes: Routes = [
{ path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) }
];Điều này giúp tăng tốc độ tải trang, đặc biệt cho ứng dụng lớn.
6. Tối Ưu Component Với Lazy Loading Trên Standalone Components
Từ Angular 14 trở đi, bạn có thể tải Component theo yêu cầu, giúp giảm thời gian tải.
Ví dụ
typescript
async loadComponent() {
const { LazyComponent } = await import('./lazy.component');
this.container.createComponent(LazyComponent);
}7. Sử Dụng Preloading Strategy Để Tăng Tốc Độ Tải Trang
Dùng Preloading Strategy để tải trước một số module quan trọng giúp cải thiện tốc độ truy cập.
Cách cấu hình
typescript
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule]
})
export class AppRoutingModule {}8. Giảm Kích Thước Bundle Bằng Tree Shaking Và Tối Ưu Import
Khi import thư viện, hãy chắc chắn bạn chỉ import những gì cần thiết để giảm kích thước bundle.
Ví dụ
typescript
import { shuffle } from 'lodash-es';9. Tránh Memory Leak Bằng Cách Unsubscribe Observable
Hãy nhớ unsubscribe các Observable để tránh rò rỉ bộ nhớ khi component bị hủy.
Ví dụ
typescript
private destroy$ = new Subject<void>();
ngOnInit() {
interval(1000).pipe(takeUntil(this.destroy$)).subscribe(() => console.log('Tick'));
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}10. Bật NgOptimizedImage Để Tối Ưu Hình Ảnh
Angular 15+ giới thiệu NgOptimizedImage, giúp cải thiện hiệu suất tải hình ảnh.
Ví dụ
html
<img ngSrc="https://example.com/image.jpg" width="600" height="400">Kết Luận
Tối ưu hóa hiệu suất trong Angular là điều cần thiết để cải thiện trải nghiệm người dùng. Hãy áp dụng những kỹ thuật trên để giúp ứng dụng của bạn chạy nhanh hơn và ổn định hơn. Bằng cách thực hiện nghiên cứu với Lighthouse hoặc Chrome DevTools, bạn có thể xác định các điểm yếu và cải thiện đáng kể hiệu suất ứng dụng của mình.
Hãy chia sẻ trải nghiệm của bạn về tối ưu hóa Angular trong phần bình luận nhé! Cảm ơn bạn đã đọc bài viết này. Chúc bạn lập trình vui vẻ!!
source: viblo
