Розподілення коду

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

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

При створенні React-застосунку за допомогою Create React App використовується збирач модулів Webpack. Він підтримує можливість розбиття коду.

Код можна розбивати за маршрутами (route-centric) і за компонентами (component-centric). У більшості проєктів найкраще підходить перший варіант. Який підхід вибрати - обирає сам розробник в залежності від вимог до проєкту. Бажано знайти золоту середину - не робити громіздкі файди та не сильно дрібнити.

Як визначитися як розбити код:

• Поділ коду на основі маршрутів - обов'язковий у будь-якому додатку.

• Поділ коду на основі компонентів роблять тільки у великих, складних інтерфейсах із сотнями компонентів та великими бібліотеками.

• Надмірний поділ коду - погана ідея. HTTP-запит за файлом може бути довше ніж додана вага до першого завантаження.

React.lazy() та React.Suspense​

Розглянемо стандартне підключення компонентів (сторінок) в роутах без поділу коду. Згори файлу проводимо імпорти.

src/components/App.jsx

import Component from "path/to/Component";

const App = () => {
  return (
    <Routes>
      <Route path="/path" element={<Component />} />
      {/* Routes */}
    </Routes>
  );
};

У специфікації ES2020 є можливість динамічно імпортувати модулі. Замість звичайного імпорту import використовують функцію import(), яка повертає проміс, значення якого файл модуля.

import("path/to/Component").then(module => console.log(module));

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

Тепер розглянемо підключення компонентів з розподілом коду.

src/components/App.jsx

import { lazy, Suspense } from "react";

const Component = lazy(() => import("path/to/Component"));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/path" element={<Component />} />
        {/* Routes */}
      </Routes>
    </Suspense>
  );
};

Розберемо цей код. При підключенні компонента викликаємо метод lazy(), а в ньому анонімну колбек-функцію-завантажувач компонента import().

Поки не завантажиться компонент буде відображатися заглушка - компонент Suspense. У prop fallback передають або React-елемент, або компонент.

Якщо залишити статичний імпорт компонентів, як в першому прикдалі, то Webpack не виконає поділ коду і додасть весь код компоненту в основний JavaScript файл проекту.

Suspense та прийом «shared layout»​

При використанні прийому «shared layout» Suspense потрібно розташувати безпосередньо всередині компонента SharedLayout - огорнути ним Outlet. Якщо цього не зробити, то будуть пропадати й повторно вантажитися компоненти загальної частини сторінок, як-то хедер, футер, бокове меню тощо.

src/components/App.jsx

import { lazy } from "react";

const Component = lazy(() => import("path/to/Component"));

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<SharedLayout />}>
        <Route path="path" element={<Component />} />
        {/* Routes */}
      </Route>
    </Routes>
  );
};

src/components/SharedLayout.jsx

import { Suspense } from "react";
import { Outlet } from "react-router-dom";

const SharedLayout = () => {
  return (
    <Container>
      <AppBar>
        <Navigation />
        <UserMenu />
      </AppBar>

      <Suspense fallback={<div>Loading...</div>}>
        <Outlet />
      </Suspense>
    </Container>
  );
};

При вкладених маршрутах батьківському роуту треба також прописувати Suspense, щоб перемальовувалась не вся сторінка, а тільки частина вкладеного маршруту.

Зверніть увагу на компоненти App, SharedLayout та About.

Покликання:

Про розбиття коду в React