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

Представьте, что вы разрабатываете веб-приложение для электронной коммерции, которое позволяет людям покупать и продавать товары.

Итак, у вас есть страницы для:

  • Поиск товаров и людей
  • Страница магазина
  • Страница продукта
  • Профиль пользователя
  • Вход Регистрация

Как хороший разработчик вы организовали код в модули, но по мере роста приложения проблема только усугубляется…

Но сначала давайте выясним, почему.

Что случилось?

Любые модули, которые вы использовали выше, загружаются при запуске приложения, даже если они не нужны, что означает:

  • Низкая начальная загрузка/скорость страницы. Воспринимаемая производительность приложения НИЗКАЯ.
    Это происходит потому, что пользователям приходится ждать, пока браузер загрузит все модули, даже те, которые не нужны в данный момент!
  • Чрезмерное использование сетевых данных. Мобильный интернет во многих странах дорогой и медленный. Это означает, что посещение вашего приложения стоит ДЕНЬГИ и ВРЕМЕНИ для каждого пользователя!
  • Плохая производительность для мобильных устройств. Если вы объедините вышеперечисленное, у вас получится приложение, не оптимизированное для мобильных устройств.
    Не имеет значения, используете ли вы RWD (адаптивный веб-дизайн), так как чрезмерный объем, который должен быть загружены и запущены при запуске приложения — это верный способ сделать его не отвечающим на пару секунд.
    Это становится еще хуже на младших мобильных устройствах…

Подводя итог: загружать почти все при запуске приложения — ужасная идея.

Зачем лениво загружать модули

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

Например, что произойдет, если пользователь просто ищет продукт и переходит на страницу продукта?

Пользователю понадобятся только модули для поиска и отображения товара, все остальные модули вообще не нужно загружать.

Как лениво загрузить модуль

Предположим, мы хотим лениво загрузить UserProfileModule.

Модуль:

@NgModule({
    imports: [CommonModule,                        
         RouterModule.forChild([                   
         {path: '', component: UserProfileComponent}    
     ])],
    declarations: [UserProfileComponent]
})

export class UserProfileModule{}

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

Внутри нашего приложения-routing.module.ts

const routes: Routes = [
{  path: '', component: SearchComponent  },
{ path: 'products/:productId', component: ProductDetailComponent},
{ path: 'profile', loadChildren:'./userprofile.module#UserProfileModule'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Обратите внимание, что мы используем loadChildrenвместо component, указываем путь к модулю и добавляем к нему в конце решетку #, за которой следует имя класса модуля: в нашем примере мы добавляем #UserProfileModule

Как это работает

  • UserProfileModule перемещается в отдельный файл при сборке приложения.
  • Когда пользователь переходит к профилю, UserProfileModule загружается отложенно: модуль загружается, а затем используется приложением.

Если пользователь никогда не посещает профиль, этот модуль никогда не будет загружен!
Вот и все, вы только что загрузили модуль в Angular!

Резюме

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

Ленивая загрузка модуля дает вам потрясающие суперспособности!

Поделиться любовью

Если вы нашли эту статью полезной, поделитесь ею и похлопайте мне в ладоши!
:P