Як покращити продуктивність вашого додатка на Angular та .NET

1. Оптимізація виявлення змін в Angular

Типовий механізм виявлення змін в Angular іноді може призвести до зайвих перевірок, особливо в великих додатках. Ось деякі способи його оптимізації:

• Використання стратегії OnPush для виявлення змін: Компоненти з фіксованим або передбачуваним потоком даних можуть скористатися стратегією OnPush. Вона гарантує, що виявлення змін відбувається тільки коли змінюються вхідні параметри компонента.

@Component({  
 selector: 'app-optimized',  
 changeDetection: ChangeDetectionStrategy.OnPush,  
 template: `
{{ data }}
`   })   
export class OptimizedComponent {    
 @Input() data: string;   
}   

• Використання сигналів (Angular 16+): Angular представив реактивні сигнали для управління станом, що може зменшити навантаження на виявлення змін. Сигнали забезпечують детальну реактивність і безперешкодно працюють зі стратегією OnPush.

import { signal } from '@angular/core';      

const counter = signal(0);   
function increment() {    
 counter.update(value => value + 1);   
}   

2. Ледача завантаження і розділення коду

Ледача завантаження — це ключова функція в Angular, яка дозволяє завантажувати модулі лише коли це необхідно, що зменшує розмір початкового пакету і покращує час завантаження.

• Реалізація ледачого завантаження для маршрутів: Розділіть додаток на модулі і завантажуйте їх ледачо.

const routes: Routes = [    
 {    
  path: 'feature',    
  loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)    
 }   
];   

• Попереднє завантаження стратегічно: Використовуйте PreloadAllModules в Angular або створіть власну стратегію попереднього завантаження для завантаження важливих модулів у фоновому режимі.

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules });   

3. Оптимізація .NET на бекенді для швидкості

На бекенді ваше .NET додаток має бути оптимізованим для ефективної обробки запитів.

• Використання асинхронного програмування: Використовуйте асинхронні контролери та доступ до даних для підвищення пропускної здатності.

public async Task GetDataAsync()   
{    
 var data = await _service.GetDataAsync();    
 return Ok(data);   
}   

• Увімкнення кешування відповідей: Кешуйте часто використовувані дані на рівні API для зменшення навантаження на сервер та затримки.

[ResponseCache(Duration = 60)]   
public IActionResult GetCachedData()   
{    
 return Ok(_data);   
}   

• Оптимізація запитів Entity Framework: Використовуйте проекції, уникайте надмірного використання Include і віддавайте перевагу AsNoTracking для операцій, що тільки читають.

var result = await _context.Users    
 .AsNoTracking()    
 .Select(u => new { u.Id, u.Name })    
 .ToListAsync();   

4. Ефективна комунікація між Angular і .NET

• Пакетні запити до API: Зменшіть кількість HTTP запитів, об'єднавши їх у пакети.
• На бекенді реалізуйте ендпоінт для обробки пакетної обробки.
• На фронтенді об'єднайте запити в один виклик.
• Увімкнення стиснення: Використовуйте gzip або Brotli для стиснення API відповідей і зменшення розміру переданих даних.

public void ConfigureServices(IServiceCollection services)   
{    
 services.AddResponseCompression(options =>    
 {    
   options.EnableForHttps = true;    
 });   
}   

• Використання WebSocket: Для реального часу розгляньте SignalR, який надає ефективний канал комунікації на базі WebSocket.

import * as signalR from '@microsoft/signalr';      

const connection = new signalR.HubConnectionBuilder()    
 .withUrl('/notifications')    
 .build();      

connection.on('ReceiveMessage', (message) => {    
 console.log(message);   
});      

connection.start();   

5. Використання кешування і CDN

• Кешування відповідей API: Використовуйте HttpInterceptor Angular для кешування GET запитів локально.

intercept(req: HttpRequest, next: HttpHandler): Observable> {    
 if (req.method === 'GET') {    
   const cachedResponse = this.cache.get(req.url);    
   if (cachedResponse) {    
     return of(cachedResponse);    
   }    
 }    
 return next.handle(req);   
}   

• Хостинг статичних ресурсів на CDN: Перемістіть Angular ресурси, такі як JavaScript, CSS та зображення, на CDN для швидшої доставки.

  Моніторинг та відлагодження продуктивності

• Використовуйте Angular DevTools: Angular DevTools допомагає профілювати час завантаження компонентів та цикли виявлення змін.

• Використовуйте інструменти продуктивності .NET: Інструменти діагностики .NET та Application Insights надають цінні відомості про продуктивність бекенду.

Висновок

Поліпшення продуктивності вашого додатка на Angular та .NET вимагає комбінації оптимізацій для фронтенду та бекенду. Використовуючи сучасні практики, такі як ледаче завантаження, кешування та використання новітніх функцій, таких як сигнали Angular та асинхронне програмування .NET, ви можете створювати швидкі, масштабовані та ефективні додатки. Постійно моніторьте продуктивність та вдосконалюйте оптимізації, щоб ваш додаток залишався чутливим під час зростання.

Щасливого кодування!😉

Перекладено з: How to Improve Your Angular and .NET Application Performance