Керівництво з відкладеного завантаження за допомогою React

Вступ

Розробляючи великі додатки React, ми зазвичай використовуємо багато зображень і відео, встановлюємо пакети/бібліотеки сторонніх розробників, робимо виклики API та робимо багато інших речей. Це, природно, збільшує час, необхідний для завантаження нашої програми, і призводить до величезного розміру пакета, що сприяє поганій взаємодії з користувачем. Ось де ледаче завантаження стає на місце. Це дозволяє нам завантажувати вміст вчасно, безпосередньо перед тим, як він буде відображено в програмі.

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

У цьому посібнику ми розглянемо, як використовувати React.lazy() та React.Suspense реалізувати функцію відкладеного завантаження та поділу коду, що дозволяє нам обробляти поділ коду без необхідності встановлення додаткових бібліотек.

Що таке ледаче завантаження?

Коли ми запускаємо веб-програму React, вона зазвичай об’єднує всю програму відразу, завантажуючи все, включаючи сторінки веб-програми, зображення, вміст і багато іншого для нас, що потенційно може призвести до повільного часу завантаження та загальної низької продуктивності, залежно від розмір вмісту та пропускна здатність Інтернету на даний момент.

Ляжке навантаження дозволяє завантажувати певні компоненти лише тоді, коли вони потрібні. Як правило, ми теж виконуємо поділ коду на логічні компоненти, які також можна відкладено завантажувати разом із вмістом.

Наприклад, якщо у нас є сторінка інформаційної панелі, на якій при натисканні відображається багато інформації з різних джерел, завжди краще, щоб ці компоненти та сторінки завантажувалися відкладено, щоб вони завантажувалися лише тоді, коли це потрібно або вимагається користувачем.

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

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

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

Як реалізувати відкладене завантаження в React

Наразі ми з’ясували, що таке відкладене завантаження та чому його важливо застосовувати. Тепер давайте подивимося, як ми можемо реалізувати це в наших програмах React, використовуючи дві функції React, які полегшують реалізацію розбиття коду та відкладеного завантаження – React.lazy() та Реагувати.Суспенс.

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

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

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

Приступаючи до роботи

Припустімо, що у нас є програма 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() використовується таким чином, повертає a Promise об'єкт. Ця обіцянка вирішує модуль, який містить компонент React, який ми хочемо відкладено завантажити default експорт.

Ми реалізували відкладене завантаження за допомогою React.lazy(), але наведений вище код завжди видасть помилка кажучи, що наш “React component suspended while rendering, but no fallback UI was specified”. Це можна виправити, обернувши компонент React.Suspenseс 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;

Висновок

У цьому посібнику ми дізналися, що таке відкладене завантаження та розбиття коду, як їх реалізувати та що найкраще місце для реалізації відкладеного завантаження — це маршрути. Це дозволяє уникнути візуалізації всієї сторінки одночасно, що може призвести до уповільнення часу завантаження під час роботи зі сторінками з великою кількістю вмісту.