Руководство по ленивой загрузке с помощью React

Введение

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

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

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

Что такое отложенная загрузка?

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

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

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

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

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

Примечание: Одностраничные приложения (СПА) предназначены для размещения всех страниц и содержимого в одном документе/странице. Вот почему ленивая загрузка особенно удобна при разработке SPA.

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

До сих пор мы видели, что такое ленивая загрузка и почему ее важно реализовать. Теперь давайте посмотрим, как мы можем реализовать это в наших приложениях React, используя две функции React, которые упрощают реализацию разделения кода и отложенной загрузки — Реагировать.ленивым() и React.Саспенс.

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

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

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

Первые шаги

Предположим, у нас есть приложение React, и мы импортировали About компонент в Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

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

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Примечание: React.lazy() используется таким образом, возвращает Promise объект. Это обещание разрешается в модуль, содержащий компонент React, который мы хотим лениво загрузить в свой модуль. default экспорт.

Мы реализовали ленивую загрузку, используя React.lazy(), но приведенный выше код всегда будет выдавать ошибка говоря, что наш “React component suspended while rendering, but no fallback UI was specified”. Это можно исправить, обернув компонент React.Suspense«s fallbackz и прикрепите резервные реквизиты, как мы объясняли ранее:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

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

Кроме того, мы можем решить разрушать импорт React, чтобы сделать код чище и читабельнее:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

До сих пор мы видели, как реализовать ленивую загрузку в наших импортированных компонентах. Теперь давайте посмотрим, как реализовать это в наших маршрутах при маршрутизации с помощью маршрутизатора React.

Как реализовать ленивую загрузку с помощью React Router

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

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

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Заключение

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