Основна проблема, пов’язана з відкладеним завантаженням React Router, полягає в тому, що це може спричинити проблеми з продуктивністю, якщо воно не реалізоване належним чином. Відкладене завантаження може збільшити початковий час завантаження сторінки, оскільки код для кожного компонента потрібно завантажувати окремо. Крім того, якщо компонент не використовується часто, він може взагалі ніколи не завантажуватися, що призведе до марної витрати ресурсів. Нарешті, існують потенційні проблеми сумісності зі старими браузерами, які не підтримують відкладене завантаження.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router> ); } export default App;
1. імпорт React, { Suspense } з 'react';
// Цей рядок імпортує бібліотеку React і компонент Suspense з бібліотеки React.
2. імпортуйте { BrowserRouter як Router, Route, Switch } з 'react-router-dom';
// Цей рядок імпортує компоненти BrowserRouter, Route і Switch з бібліотеки react-router-dom.
3. const Home = React.lazy(() => import('./Home'));
// Цей рядок створює константу під назвою Home, яка використовує функцію відкладеного завантаження React для динамічного імпорту компонента під назвою Home з файлу в тому ж каталозі, що й цей файл (компонент App).
4. const About = React.lazy(() => import('./About'));
// Цей рядок створює константу з назвою About, яка використовує відкладене завантаження для динамічного імпорту компонента з назвою About з файлу в тому ж каталозі, що й цей файл (компонент App).
const Contact = React.lazy(() => import('./Contact')); // Цей рядок створює константу під назвою Contact, яка використовує відкладене завантаження для динамічного імпорту компонента під назвою Contact з файлу в тому ж каталозі, що й цей файл (компонент App).
5. функція App() { return ( // Це функція зі стрілкою, яка повертає код JSX, загорнутий у тег Router, імпортований раніше
6.Loading ...
}> //Цей тег Suspense обгортає всі наші маршрути резервними властивостями Loading… якщо будь-який маршрут потребує часу для завантаження
7. //Тег перемикання забезпечить одночасне відтворення лише одного маршруту
8. //Цей маршрут візуалізує Home Component, коли буде збігатися точний шлях “/”.
9. //Цей маршрут буде відображати компонент About, коли знайдеться шлях “/about”.
10. //Цей маршрут відображатиме контактний компонент, коли шлях “/contact” збігається ) } export default App; //Нарешті ми закриваємо всі теги та експортуємо нашу програму
Проблема відкладеного завантаження
Відкладене завантаження — це техніка, яка використовується для затримки завантаження певних компонентів, поки вони не знадобляться. Це може допомогти покращити продуктивність програми, завантажуючи лише те, що необхідно в будь-який момент часу. Однак це може бути проблемою під час використання React Router, оскільки він не підтримує відкладене завантаження з коробки. Щоб вирішити цю проблему, розробники повинні вручну налаштувати свої маршрути, щоб увімкнути відкладене завантаження. Це може включати налаштування динамічного імпорту та поділ коду, що може бути складним і трудомістким завданням. Крім того, деякі бібліотеки, такі як React Loadable, можуть знадобитися для належної реалізації відкладеного завантаження за допомогою React Router.
Що таке відкладене завантаження React
Відкладене завантаження React — це функція React Router, яка дозволяє завантажувати компоненти на вимогу. Це означає, що замість того, щоб завантажувати всі компоненти одночасно, за потреби завантажуються лише необхідні компоненти. Це допомагає скоротити початковий час завантаження сторінки та покращити продуктивність. Це також забезпечує кращу організацію коду та відокремлення проблем, оскільки кожен компонент можна завантажувати незалежно.
Як використовувати React lazy на своєму маршрутизаторі
React lazy — це функція React, яка дозволяє динамічно імпортувати компоненти. Це означає, що замість того, щоб завантажувати всі компоненти заздалегідь, ви можете завантажити їх за потреби. Це може бути корисним для оптимізації продуктивності у великих програмах.
Щоб використовувати React lazy на вашому маршрутизаторі в React Router, вам потрібно обернути компонент, який ви хочете відкладено завантажити, у виклик динамічного імпорту. Наприклад:
const MyComponent = React.lazy(() => import('./MyComponent'));
Потім, визначаючи свої маршрути, просто передайте компонент MyComponent у компонент Route так:
Це змусить React Router динамічно завантажувати компонент MyComponent під час переходу до цього маршруту.
