Разделение кода на основе маршрута на стороне клиента React js
ПРИМЕЧАНИЕ. Этот метод предназначен только для рендеринга на стороне клиента.
когда ваше приложение растет, его размер тоже растет.
Это увеличит начальное время загрузки, в результате чего пользователи будут чувствовать себя некомфортно. опыт работы с веб-приложением будет плохим для пользователей.
Загружать только необходимые файлы изначально и показывать что-то пользователям намного лучше, чем пользователь, ожидающий 5-10 секунд, чтобы загрузить все веб-приложение.
Тем временем мы можем загрузить в браузер пользователя дополнительные файлы с требованиями пользователя.
в этом методе приложение разделит код по маршрутам
в качестве примера возьмем типовое веб-приложение с тремя маршрутами
мой-веб-сайт/
мой-веб-сайт/контакты
мой-веб-сайт/о нас
в этом примере, если пользователь изначально запросил маршрут «my-web-site/about», ресурсы [код] для /contact не будут загружены. ресурсы, связанные с /contact [код], будут загружаться в браузер только в том случае, если пользователь хочет переключиться на маршрут /contact
Итак, давайте приступим к коду
create-react-app code-splitting-sample-app cd code-splitting-sample-app
сделать домашнюю страницу в папке src
сделать страницу about в папке src
сделать контактную страницу в папке src
позволяет добавить маршрутизацию в приложение. для этого нам нужен пакет npm retact-router-dom
npm install react-router-dom
давайте добавим маршруты и пути.
после добавления маршрутов файл app.js будет таким
нам нужно еще два импорта ленивых, приостановка реакции
import React, { lazy, Suspense } from 'react';
Компонент приостановки используется для отображения некоторого контента до тех пор, пока новый компонент не загрузится для просмотра.
для загрузки компонентов с ленивой загрузкой мы определяем их как константы следующим образом
const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));
const Contact = lazy(() => import("./Contact"));
окончательный файл App.js будет таким
Это оно !
