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> ); };