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

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

1. модулі повинні імпортовані deafault
2. вказуємо імпорт для модуля у lazy
3. обгортаємо модулі у 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>
  );
};