Как правильно использовать lazy loading в React?

Question

[luxurypluxury]

Использую lazy-loading для чанкования кода.

const HomePage = lazy(() => import("./pages/HomePage"));
const ErrorPage = lazy(() => import("./pages/ErrorPage"));

Далее

<Suspense fallback={<Loader />}>
      <Routes>
        <Route path="*" element={<ErrorPage />} />
        <Route path="/" element={<HomePage />} />
       </Routes>
</Suspense>

Меня раздражает что лоадер чисто промигивает при загрузке страниц, иногда нормально грузится. Но когда страницы прогрузились, то при переходе на них Suspense просто мигает на доли миллисекунд. Как сделать грамотно?

Comments

[Александр]

Оборачивать каждый element в Suspense не пробовали?

[Антон Горецкий]

Грамотно оборачивать в саспенс сами элементы а не роуты.

[Антон]

const HomePage = lazy(() => import("./pages/HomePage"));
const ErrorPage = lazy(() => import("./pages/ErrorPage"));

const App = () => {
  return (
    <Routes>
      <Route path="*" element={
        <Suspense fallback={<Loader />}>
          <ErrorPage />
        </Suspense>
      } />
      <Route path="/" element={
        <Suspense fallback={<Loader />}>
          <HomePage />
        </Suspense>
      } />
    </Routes>
  );
};

Answer 1

[historydev]

Не нужно юзать ленивую загрузку на каждую встречную-поперечную страницу, это лишь замедлит работу.

Используй его только для тяжёлых страниц, допустим страницу сообщений где ты загружаешь кучу сообщений для кэширования.
Или страницы где производится множество запросов к серверу.

ErrorPage - это 4 строки текста, что тут откладывать?
- ленивая загрузка лишь замедлит процесс при запросе и не более.

Про мигание тебе написали в комментариях.

Comments

[Александр]

Немного не так ещё. Например vite на чанки делит только на основании ленивой загрузки, а иначе ему надо вручную это "объяснять".

[historydev]

Александр,
- Это уже проблемы конкретного сборщика, а не реакта, особенно если брать тот факт, что 80% будут юзать create-react-app, а там как известно webpack.

[Артур Гранд]

historydev, create-react-app еще кто-то использует? Даже реактовцы не рекомендуют это