Ваше приложение React слишком медленное или загружается слишком долго? Если это так, вы можете использовать технику, известную как разделение кода. Этот метод очень эффективен для повышения скорости загрузки и производительности приложений React. Но что такое разделение кода? И как это делается?

Что такое разделение кода?

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

Рассмотрим приложение React с тремя страницами: домашняя страница, страница сведений и страница продуктов. Когда вы находитесь на главной странице, нет смысла загружать страницу «О нас» или страницу продуктов. Потому что вы еще не на этих страницах. Идея разделения кода заключается в том, чтобы убедиться, что вы загружаете код только тогда, когда это необходимо.

Откройте веб-страницу в веб-браузере, а затем откройте DevTools (вы можете нажать F12 на клавиатуре, чтобы открыть ее в Google Chrome). Далее перейдите на вкладку Источник. Там вы найдете весь код, загруженный при переходе на страницу. Без разделения кода браузер загружает все файлы вашего проекта при начальной загрузке страницы. Это может замедлить работу вашего сайта, если он содержит много файлов.

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

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

Функции разделения кода: использование динамического импорта

Рассмотрим следующую ситуацию. Вы хотите, чтобы на вашей домашней странице была кнопка. Когда вы нажимаете кнопку, вы хотите предупредить сумму 2 и 2 (что равно 4). Итак, вы создаете Home.js компонент и определить вид вашей домашней страницы.

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

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

экспортпо умолчаниюфункцияДом() { 
возвращаться ( 
"Дом"> 
Домашняя страница</h1>
 {
Импортировать("../сумма.js").затем((модуль) => {
 тревога(модуль.сумма(2, 2))
 })
 }}
 >
 Суммируйте оба числа
 </button> 
 </div> 
 ); 
}

Теперь браузер будет загружать только сумма.js модуль при нажатии кнопки. Это ускорит загрузку главной страницы.

Компоненты разделения кода: использование React.lazy и Suspense

Вы можете разделить компоненты в React, используя ленивый() функция. Лучшее место для разделения кода — внутри маршрутизатора. Потому что именно здесь вы сопоставляете компоненты с маршрутами в вашем приложении. Вы можете прочитать наше руководство на как создать одностраничное приложение с помощью React Router если вам нужно освежиться.

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

Во-первых, вам нужно импортировать необходимые функции и компоненты из реагировать и реакция-маршрутизатор-дом модули:

Импортировать { Маршруты, Маршрут, Выход, Ссылка} от"реагировать-роутер-дом";
Импортировать {ленивый, неопределенность} от"реагировать";

Далее вам необходимо динамически импортировать компоненты с помощью ленивый() функция:

константа Дом = ленивый(() =>Импортировать("./компоненты/Главная"));
константа О = лень(() =>Импортировать("./Компоненты/О программе"));
константа Продукты = ленивый(() =>Импортировать("./компоненты/Продукты"));

Далее настраиваем раскладку (меню навигации). Использовать компонент для отображения компонента, соответствующего текущему маршруту (Дом, О, или Продукты компонент):

функцияNavWrapper() {
возвращаться (
 <>

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

Наконец, настройте маршрут:

экспортпо умолчаниюфункцияПриложение() {
возвращаться (

"/" элемент={}>
"/" элемент={} />
"/продукты" элемент={} />
"/о" элемент={} />
 </Route>
 </Routes>
 );
}

Теперь, когда вы посещаете домашнюю страницу, браузер загружает только Home.js файл. Таким же образом, когда вы нажимаете кнопку О ссылку в меню навигации для перехода на страницу «О программе», браузер загружает только О.js файл. То же самое и со страницей «Продукты».

Условное разделение кода

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

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

Вот как будет выглядеть этот код:

Импортировать {ленивый, неопределенность} от"реагировать";
константа Админданные = ленивый(() =>Импортировать("./Админданные"));
экспортпо умолчаниюфункцияДом() { 
константа [isAdmin, setIsAdmin] = useState(ЛОЖЬ)
возвращаться ( 

"Дом"> 
Домашняя страница</h1>
 установитьIsAdmin(предыдущий => !пред)}>
 Переключить администратора
 </button> 

Загрузка...</h1>}>
 {Администратор? <Админданные />: <h2> Не администратор h2>} 
 </Suspense>
 </div> 
 ); 
}

Теперь, когда вы нажимаете кнопку переключения, isAdmin будет установлен на истинный. В результате приложение покажет который лениво загружается. Но если вы не администратор, то приложение никогда не загрузится. AdminData.js потому что это не понадобится.

Условное разделение кода использует ту же концепцию, что и условный рендеринг в React.

Расширенные концепции разделения кода

Один из продвинутых методов, который вы можете включить при разделении кода, — это переходы. использовать переход () hook позволяет вам делать несрочные обновления, которые не изменят ваш пользовательский интерфейс, пока они не закончат обновление.

Сначала вы импортируете хук:

Импортировать {useTransition} от"реагировать"

Затем вы вызываете хук, который возвращает находится на рассмотрении и startTransition:

константа [ожидание, startTransition] = useTransition()

Наконец, оберните код для обновления вашего состояния внутри начальный переход ():

начальный переход(() => {
 установитьIsAdmin((предыдущий) => !пред)
})

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

Другие способы оптимизации производительности React

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