Стратегии загрузки маршрутов

Понимание того, как и когда загружаются маршруты и компоненты при маршрутизации Angular, необходимо для создания адаптивных веб-приложений. Angular предлагает две основные стратегии управления загрузкой:

1. Немедленная загрузка: маршруты и компоненты загружаются сразу
2. Отложенная загрузка: маршруты и компоненты загружаются только при необходимости

Каждый подход имеет свои преимущества в разных ситуациях.

Компоненты с немедленной загрузкой

Если определить маршрут со свойством component, указанный компонент загружается сразу в составе того же пакета JavaScript, что и конфигурация маршрута.

import {Routes} from '@angular/router';
import {HomePage} from './components/home/home-page';
import {LoginPage} from './components/auth/login-page';

export const routes: Routes = [
  // HomePage and LoginPage are both directly referenced in this config,
  // so their code is eagerly included in the same JavaScript bundle as this file.
  {
    path: '',
    component: HomePage,
  },
  {
    path: 'login',
    component: LoginPage,
  },
];

При немедленной загрузке компонентов маршрута браузеру необходимо скачать и обработать весь JavaScript этих компонентов при первоначальной загрузке страницы, но компоненты сразу становятся доступны Angular.

Включение большего объёма JavaScript в первоначальную загрузку страницы замедляет её, но может обеспечить более плавные переходы при навигации пользователя по приложению.

Компоненты и маршруты с отложенной загрузкой

Чтобы отложить загрузку JavaScript компонента до момента активации соответствующего маршрута, можно использовать свойство loadComponent. Свойство loadChildren откладывает загрузку дочерних маршрутов до сопоставления маршрутов.

import {Routes} from '@angular/router';

export const routes: Routes = [
  {
    path: 'login',
    loadComponent: () => import('./components/auth/login-page'),
  },
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component'),
    loadChildren: () => import('./admin/admin.routes'),
  },
];

Свойства loadComponent и loadChildren принимают функцию загрузки, возвращающую Promise, который разрешается в компонент Angular или набор маршрутов соответственно. В большинстве случаев эта функция использует стандартный API динамического импорта JavaScript. Однако можно использовать любую произвольную асинхронную функцию загрузки.

Если файл с отложенной загрузкой использует экспорт default, можно напрямую вернуть Promise import() без дополнительного вызова .then для выбора экспортируемого класса.

Отложенная загрузка маршрутов может значительно повысить скорость загрузки приложения Angular за счёт исключения больших фрагментов JavaScript из первоначального пакета. Эти фрагменты кода компилируются в отдельные «чанки» JavaScript, которые маршрутизатор запрашивает только тогда, когда пользователь переходит по соответствующему маршруту.

Отложенная загрузка в контексте внедрения зависимостей

Маршрутизатор выполняет loadComponent и loadChildren в контексте внедрения зависимостей текущего маршрута. Это позволяет вызывать injectвнутри этих функций загрузки для доступа к провайдерам, объявленным для этого маршрута, унаследованным от родительских маршрутов посредством иерархического внедрения зависимостей или доступным глобально. Благодаря этому отложенная загрузка учитывает контекст.

import {Routes} from '@angular/router';
import {inject} from '@angular/core';
import {FeatureFlags} from './feature-flags';

export const routes: Routes = [
  {
    path: 'dashboard',
    // Runs inside the route's injection context
    loadComponent: () => {
      const flags = inject(FeatureFlags);
      return flags.isPremium
        ? import('./dashboard/premium-dashboard')
        : import('./dashboard/basic-dashboard');
    },
  },
];

Использовать немедленную или отложенную загрузку маршрута?

При выборе между немедленной и отложенной загрузкой маршрута следует учитывать множество факторов.

Как правило, немедленная загрузка рекомендуется для основных целевых страниц, а для остальных страниц — отложенная.

Следующие шаги

Узнайте, как отображать содержимое маршрутов с помощью Outlet.