React.lazy() та React.Suspense Динамічне \ лініве завантаження модулів по необхідності

Оптимизація завантажень модулів

модулі повинні імпортовані deafault

вказуємо імпорт для модуля у lazy

обгортаємо модулі у Suspense

import { lazy, Suspense } from "react";
const MyComponent = lazy(() => import("path/to/MyComponent"));
const App = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/some-path" element={<MyComponent />} />
{/* Інші маршрути */}
</Routes>
</Suspense>
);
};