Кеширование стратегии

В Angular маршрутизация управляется через RouterModule, и одним из важных аспектов производительности является стратегия кеширования компонентов при навигации. Для этого используется сервис RouteReuseStrategy, который позволяет контролировать, какие компоненты сохраняются в памяти при переходе между маршрутами.

Базовая структура RouteReuseStrategy

export class CustomReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true; // Определяет, нужно ли сохранять компонент
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
    // Сохраняет компонент в памяти
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    // Определяет, есть ли сохранённый компонент для повторного использования
    return !!this.storedHandles[route.routeConfig?.path || ''];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return this.storedHandles[route.routeConfig?.path || ''] || null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  private storedHandles: { [key: string]: DetachedRouteHandle } = {};
}

Применение кастомной стратегии

  • Сохранение состояния компонентов: при возврате на маршрут компонент не создаётся заново, а восстанавливается из кеша. Это экономит ресурсы и ускоряет навигацию.
  • Избирательное кеширование: можно хранить только критически важные маршруты, например страницы со сложными формами или длинными списками.
  • Интеграция с ngOnInit и ngOnDestroy: важно учитывать, что методы жизненного цикла вызываются только при создании и уничтожении компонента. При повторном использовании компонента из кеша методы не вызываются повторно, что нужно учитывать при инициализации данных.

Примеры использования

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }]
})
export class AppRoutingModule {}
  • Кеширование улучшает производительность при сложной навигации с многими компонентами.
  • Необходимо контролировать память, так как хранение большого числа компонентов может привести к повышенному потреблению ресурсов.
  • В комбинации с lazy-loading стратегия кеширования позволяет поддерживать быстрый доступ к часто используемым маршрутам без загрузки всего приложения сразу.

Важные нюансы

  • Стратегия кеширования не заменяет управление состоянием данных — для этого лучше использовать сервисы с потоками данных (BehaviorSubject, Observable).
  • Не все компоненты подходят для кеширования, особенно если они зависят от динамических данных, которые должны обновляться при каждом переходе.
  • Тестирование стратегии важно для выявления потенциальных проблем с памятью и неожиданным поведением интерфейса.
Оглавление