Вот пошаговое руководство по реализации отложенной загрузки и разделения кода в проекте React. Мы создадим простое приложение с двумя маршрутами, лениво загружающее компоненты.

Шаг 1. Создайте новое приложение React

Если вы еще этого не сделали, создайте новое приложение React с помощью Create React App:

npx create-react-app lazy-loading-example
cd lazy-loading-example

Шаг 2. Установите React Router

Установите React-router-dom для маршрутизации:

npm install react-router-dom

Шаг 3. Настройте отложенную загрузку и разделение кода

Создание компонентов

1. Создайте папку с именем компоненты внутри каталога src.
2. Внутри компонентов создайте два файла: Home.js и About.js.

Home.js

import React from 'react';

const Home = () => {
  return 
Home Page
;
};

export default Home;

О.js

import React from 'react';

const About = () => {
  return 
About Page
;
};

export default About;

Обновить App.js

Теперь измените файл App.js, чтобы реализовать отложенную загрузку и маршрутизацию:

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// Lazy load components
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    Loading...}>
        
  );
}

export default App;

Шаг 4. Запустите ваше приложение

Теперь запустите приложение, чтобы увидеть его в действии:

npm start

Шаг 5. Проверьте ленивую загрузку

1. Откройте браузер и перейдите по адресу http://localhost:3000.
2. Нажмите ссылку «Главная», чтобы увидеть загрузку компонента «Главная».
3. Нажмите ссылку «О программе», чтобы увидеть, как компонент «О программе» загружается лениво.

Ключевые моменты

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

Дополнительные улучшения

Вы можете улучшить свою настройку:

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

Если вам нужны более конкретные функции или дополнительная помощь, дайте мне знать!