React.lazy и предварительная загрузка компонентов

Question

У меня есть двухступенчатый поток приложений, который выглядит следующим образом:

const Step1 = React.lazy(() => import('./Step1'));
const Step1 = React.lazy(() => import('./Step2'));

<Suspense fallback={<Loading />}>
  <Route path="/step1" render={() => <Step1 />} />
  <Route path="/step2" render={() => <Step2 />} />
</Suspense>

Используя React.lazy, я могу отложить загрузку <Step2 />, пока пользователь находится на <Step1 />, что может улучшить начальную страницунагрузить. Тем не менее, я хотел бы предварительно выбрать <Step2 />, пока пользователь включен <Step1 /> в качестве оптимизации. Есть ли API для этого с React.lazy?

Редактировать:

Чтобы уточнить - я использую маршрутизатор для рендеринга двухэтапной формы. Первоначально пользователь начнёт с /step1. После того как пользователь выполнит все задачи в <Step1 />, они будут направлены по пути /step2. На этом этапе маршрутизатор будет отображать компонент <Step2 />.

Я спрашиваю, есть ли шаблон для предварительной выборки <Step />, пока пользователь все еще находится на <Step1 />.

Answer 1

Я также читал об этом несколько дней назад, и мне понравился этот подход:

Улучшите React.lazy, чтобы иметь обратный вызов, который можно использовать для загрузки компонента. Примерно так:

function lazyWithPreload(factory) {
  const Component = React.lazy(factory);
  Component.preload = factory;
  return Component;
}

const ComponentToPreload = lazyWithPreload(() => import("./Component"));

/* usage in Component */

ComponentToPreload.preload(); // this will trigger network request to load the component

Таким образом, вы можете предварительно загрузить компонент, где вы хотите. Как и в случае события click или после установки текущего компонента.

Необходимо прочитать исходное сообщение: https://medium.com/hackernoon/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d

---

Если вы используете react-loadable. Вы можете проверить это: https://github.com/jamiebuilds/react-loadable#preloading

Надеюсь, это поможет!