Использование ленивой загрузки (lazy loading) в React

React, стал одним из самых популярных JavaScript-фреймворков для создания пользовательских интерфейсов. С появлением функциональных компонентов и хуков в React, разработчики получили новые инструменты для более чистого и эффективного кода. Однако, с увеличением размеров проектов, возникает проблема производительности, и в этом контексте ленивая загрузка (lazy loading) становится важным инструментом.

Что такое Ленивая Загрузка?

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

Преимущества Ленивой Загрузки в React

• Уменьшение начальной загрузки страницы: Ленивая загрузка позволяет снизить объем загружаемого кода при первоначальной загрузке страницы, что улучшает время загрузки и пользовательский опыт.
• Оптимизация производительности: Загрузка компонентов по требованию помогает уменьшить нагрузку на ресурсы и улучшить отзывчивость приложения, поскольку только необходимый код будет загружен в момент, когда компонент станет видимым.
• Экономия трафика: Ленивая загрузка также означает, что пользователи не будут загружать весь код приложения сразу, что особенно важно для пользователей с медленным интернет-соединением.

Как использовать Ленивую Загрузку в React

1. React.lazy()

React предоставляет функцию React.lazy(), которая позволяет лениво загружать компоненты. Пример:

const MyLazyComponent = React.lazy(() => import('./MyComponent'));

2. Suspense

Для отображения состояния ожидания загрузки ленивых компонентов используется компонент Suspense. Пример:

const MyLazyComponent = React.lazy(() => import('./MyComponent'));

function MyComponentWrapper() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <MyLazyComponent />
    </React.Suspense>
  );
}

3. Использование в функциональных компонентах

Ленивая загрузка также легко интегрируется в функциональные компоненты. Пример:

import React, { lazy, Suspense } from 'react';

const MyLazyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Итоги

Использование ленивой загрузки в React для функциональных компонентов является мощным инструментом оптимизации производительности. Эта техника позволяет улучшить время загрузки приложения, оптимизировать использование ресурсов и создавать более отзывчивые веб-приложения. При разработке больших проектов важно рассматривать ленивую загрузку как неотъемлемую часть процесса оптимизации.

В первой части мы говорили о настройке маршрутизатора и упоминали BrowserRouter и NativeRouter, но это не единственные типы роутеров. Всего существует 6 роутеров, и в этой части мы подробно рассмотрим каждый из них. Серия статей о React Router v6 состоит из 4 частей.

1. Основы React Router
2. Продвинутые определения маршрутов
3. Управление навигацией
4. Подробно о роутерах (рассматривается в этой статье)

BrowserRouter

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

NativeRouter

NativeRouter по сути является эквивалентом BrowserRouter, но для React Native. Если вы используете React Native, то это роутер, который вы захотите использовать.

HashRouter

Этот роутер работает очень похоже на BrowserRouter, но основное отличие заключается в том, что вместо того, чтобы изменять URL-адрес на что-то вроде http://localhost:3000/books он будет хранить URL-адрес в хэше, как http://localhost:3000/#/books. Как видите, этот URL-адрес имеет # после URL-адреса, который представляет собой хэш-часть URL-адреса. Все, что находится в хэш-части URL-адреса, является просто дополнительной информацией, которая обычно обозначает идентификатор на странице для целей прокрутки, поскольку страница будет автоматически прокручиваться до элемента с идентификатором, представленным хешем, при загрузке страницы. В React Router этот хэш на самом деле не используется для хранения идентификационной информации для прокрутки, а вместо этого он хранит информацию, связанную с текущим URL-адресом. Причина, по которой React Router делает это, заключается в том, что некоторые хостинг-провайдеры не позволяют вам фактически изменять URL-адрес вашей страницы. В этих очень редких случаях вы захотите использовать HashRouter, поскольку HashRouter не изменит фактический URL-адрес вашей страницы, а изменит только хэш вашей страницы. Если вы можете использовать какой-либо URL-адрес у своего хостинг-провайдера, то это не то, что вам следует использовать.

HistoryRouter

HistoryRouter (в настоящее время называется unstable_HistoryRouter) — это роутер, который позволяет вручную управлять объектом истории, который React Router использует для хранения всей информации, связанной с историей маршрутизации вашего приложения. Этот объект истории помогает убедиться, что такие вещи, как кнопки «Назад» и «Вперед» в браузере, работают правильно. Это роутер, который вы, вероятно, никогда не должны использовать, если у вас нет очень конкретной причины, по которой вы хотите перезаписать или контролировать поведение истории по умолчанию React Router.

MemoryRouter

MemoryRouter немного отличается от остальных роутеров, о которых мы говорили, поскольку вместо того, чтобы хранить информацию о текущем маршруте в URL-адресе браузера, этот роутер хранит информацию о роуте непосредственно в памяти. Очевидно, что это очень неподходящий роутер для обычных операций маршрутизации, но этот роутер невероятно полезен, когда вы пишете тесты для своего приложения, у которого нет доступа к браузеру. Из-за того, как работает React Router, вам необходимо, чтобы ваши компоненты были упакованы в маршрутизатор, иначе весь ваш код маршрутизации будет выдавать ошибки и ломаться. Это означает, что даже если вы хотите протестировать один компонент, вам нужно будет обернуть этот компонент внутрь маршрутизатора, иначе он будет выдавать ошибки. Если вы тестируете свой код таким образом, что у него нет доступа к браузеру (например, модульное тестирование), то маршрутизаторы, о которых мы говорили до сих пор, будут выдавать ошибки, поскольку все они зависят от URL-адреса в браузере. MemoryRouter, с другой стороны, хранит всю свою информацию в памяти, что означает, что он никогда не обращается к браузеру и идеально подходит при модульном тестировании компонентов. Однако, за исключением этого конкретного случая использования, этот маршрутизатор никогда не будет использоваться.

StaticRouter

Роутер StaticRouter также имеет очень специфический вариант использования. Этот маршрутизатор специально предназначен для серверного рендеринга ваших приложений React, поскольку он принимает один проп location и визуализирует ваше приложение, используя этот location в качестве URL-адреса. Этот роутер на самом деле не может выполнять какую-либо маршрутизацию и будет просто отображать одну статическую страницу, но это идеально подходит для рендеринга на сервере, поскольку вы хотите просто отобразить HTML вашего приложения на сервере, а затем клиент может настроить всю вашу маршрутизацию и так далее.

<StaticRouter location="/books">
  <App />
</StaticRouter>

Итоги

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