Журнал об IT-бизнесе, технологиях и цифровой трансформации

Устройство ленивой загрузки в популярных фронтенд-фреймворках Mail.ru Cloud Solutions
Mail.ru Cloud Solutions
  • 17 июля
  • Разработка

Устройство ленивой загрузки в популярных фронтенд-фреймворках

Автор: Максим Слепов
Популярное

Перевод статьи о том, что означает ленивая загрузка в трех наиболее часто используемым фронтенд-фреймворках: Angular, React и Vue.js. Далее текст от лица автора.

Нетерпеливая загрузка против ленивой

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

Теперь вы можете подумать: это здорово, приложение станет более быстрым, будет загружаться быстрее. Однако если в вашем приложении есть модуль или компонент, выполнение и загрузка которого занимает значительное время, это все равно означает замедление работы приложения. По этой причине вы можете использовать предварительную загрузку компонента в фоновом режиме. Эта техника требует отдельной статьи — здесь я не буду вдаваться в детали, а просто познакомлю вас с этой концепцией ближе к концу.

О типовых проектах для примера

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

  • как использовать ленивую загрузку компонента внутри страницы;
  • как использовать ленивую загрузку компонента с помощью маршрутизации.

Чтобы эффективно визуализировать ленивую загрузку, демо-приложение (компонент) будет вычислять 42-е число Фибоначчи. Математические операции считаются блокирующими — это означает, что наша программа не может продвинуться дальше; она должна вернуть результат вычисления. Эта стратегия используется только для имитации того, что происходит, если существует фрагмент кода, выполнение которого занимает много времени, и какое влияние он оказывает на общий опыт использования приложения.

Чтобы получить доступ к проекту, пожалуйста, посетите репозиторий GitHub.

Angular

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

Компонент Фибоначчи

Вот как наш компонент выглядит в Angular:

fibonacci: number;

 ngOnInit(): void {
  const fibonacci = num => {
   if (num <= 1) return 1;
   return fibonacci(num - 1) + fibonacci(num - 2);
 };
 this.fibonacci = fibonacci(42);
}

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

Загрузка компонента на странице

Сначала давайте рассмотрим, как загрузить компонент на страницу. Для этого мы добавим следующее:

I am the home component.

Вместе со следующим TypeScript-кодом:

export class AppComponents {
 showFibonacci:Boolean = false;
 showMe() {
  this.showFibonacci = !this.showFibonacci
 }
}

Что действительно интересно в этой ситуации, так это то, что компонент Fibonacci будет загружаться только в том случае, если значение showFibonacci равно true. Это означает, что управлять ленивой загрузкой можно только с помощью директивы ngIf. Это происходит потому, что Angular не просто показывает или скрывает компонент в DOM — он добавляет или удаляет его на основе указанного условия.

Ленивая загрузка или роутинг

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

Создать функциональный модуль в нашем приложении вместе со вторым компонентом можно с помощью Angular CLI: ng g m fibonacci && ng g c —module=fibonacci fibonacci.

После создания модуля мы можем назначить ему компонент, а затем добавить его в основной модуль маршрутизации (app-routing.module.ts):

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

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

Сравните код выше с этим:

import { FibonacciComponent } from './fibonacci/fibonacci.component';

const routes: Routes = [{
 path: 'fibonacci', component: FibonacciComponent
}];

Этот код будет загружать FibonacciComponent сразу. Это вызовет значительную задержку в отображении главной страницы приложения. Зачем блокировать главную страницу с помощью операции в компоненте, который мы даже не видим или не используем?

Тут можно прочитать больше про ленивую загрузку в Angular.

Vue

Теперь давайте рассмотрим, как добиться ленивой загрузки при разработке с помощью фреймворка Vue.js. Давайте создадим Vue-приложение с помощью интерфейса командной строки Vue CLI и добавим новый компонент. Взгляните на то, как будет выглядеть часть компонента

Это может показаться логичным способом сделать ленивую загрузку, однако при открытии страницы становится очевидным, что начальное время загрузки действительно велико. Это происходит потому, что компонент загружается сразу независимо от условия v-if. Другими словами, мы говорим Vue загрузить все компоненты независимо от их добавления в DOM.

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

Ссылка скопирована!

Что еще почитать про ИТ-бизнес