Метод 1: отложенная загрузка модулей
В Angular модули — это способ организовать ваше приложение в логические единицы. Благодаря отложенной загрузке модулей вы можете загружать определенные модули только тогда, когда они необходимы, вместо того, чтобы загружать все приложение сразу. Это может значительно улучшить время начальной загрузки. Давайте посмотрим, как реализовать отложенную загрузку модулей в Angular 11:

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },
  // ... other routes
];

В этом примере, когда пользователь переходит к маршруту «Панель мониторинга» или «Профиль», соответствующие модули будут загружены по требованию.

Метод 2: отложенная загрузка компонентов
Отложенная загрузка не ограничивается модулями; его также можно применять к отдельным компонентам внутри модуля. Это полезно, когда у вас есть большие компоненты, которые не требуются немедленно. Вот как можно отложенно загружать компоненты в Angular 11:

import { Component, NgModule } from '@angular/core';
@Component({
  selector: 'app-lazy-component',
  template: 'Lazy Component',
})
export class LazyComponent {}
@NgModule({
  declarations: [LazyComponent],
})
export class LazyModule {}

Выделив компонент в отдельный модуль, вы можете загружать его лениво, используя тот же синтаксис loadChildren, что и в предыдущем примере.

Метод 3: стратегии предварительной загрузки
Angular предоставляет различные стратегии предварительной загрузки, которые позволяют загружать определенные модули или компоненты в фоновом режиме, пока пользователь взаимодействует с приложением. Это может еще больше улучшить взаимодействие с пользователем за счет сокращения времени ожидания при переходе к другой части приложения. Вот несколько стратегий предварительной загрузки:

• Нет предварительной загрузки: модули загружаются только по запросу.
• PreloadAllModules: все модули предварительно загружаются после загрузки исходного модуля.
• Пользовательская предварительная загрузка. Вы можете создать собственную стратегию предварительной загрузки в зависимости от конкретных потребностей вашего приложения.

Чтобы реализовать стратегию предварительной загрузки, вы можете изменить конфигурацию RouterModuleв своем приложении:

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Отложенная загрузка — это мощный метод Angular 11, который может значительно повысить производительность и улучшить взаимодействие с пользователем вашего приложения. Загружая модули и компоненты только при необходимости, вы можете сократить время начальной загрузки и обеспечить плавность и оперативность работы пользователей. Реализация отложенной загрузки предполагает использование синтаксиса loadChildrenдля модулей, разделение компонентов на отдельные модули и использование стратегий предварительной загрузки. Применяя эти методы, вы можете создавать высокопроизводительные приложения Angular, которые понравятся вашим пользователям.