Разделение базового кода маршрутизатора React (получить первый фрагмент, а затем получить другие фрагменты асинхронно в фоновом режиме)

Я использую create-react-app. Я хочу разделить базовый код реакции-маршрутизатора, но я хочу получить первый фрагмент, который пользователь открывает в браузере, а затем асинхронно получать другие фрагменты в фоновом режиме.

Маршруты

const HomeModule  = React.lazy(() => import('./modules/ft_home_module/src/main'));
const AuthModule  = React.lazy(() => import('./modules/ft_auth_module/src/main'));
const ProfileModule  = React.lazy(() => import('./modules/ft_profile_module/src/main'));
const MerchantModule  = React.lazy(() => import('./modules/ft_merchant_module/src/main'));

<Route path="/home" component={HomeModule} />
<Route path="/auth" component={AuthModule} />
<Route path="/profile" component={ProfileModule} />
<Route path="/merchant" component={MerchantModule} />

предположим, если пользователь открывает /home в браузере, то домашний фрагмент будет загружен первым после загрузки первого фрагмента, вызывающего другие фрагменты асинхронно в фоновом режиме.

Обязательный вывод

  1. Откройте /home в браузере
  2. Получить домой кусок первым
  3. затем другие три фрагмента асинхронно в фоновом режиме

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


reactjs create-react-app react-router-dom code-splitting code-splitting-async
person Muhammad Numan    schedule 21.05.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете добиться этого, используя подсказки ресурсов браузера (предварительная загрузка и предварительная выборка).

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

const HomeModule  = React.lazy(() => import(/* webpackPreload: true * /'./modules/ft_home_module/src/main'));
const AuthModule  = React.lazy(() => import(/* webpackPrefetch: true * /'./modules/ft_auth_module/src/main'));
const ProfileModule  = React.lazy(() => import(/* webpackPrefetch: true * /'./modules/ft_profile_module/src/main'));
const MerchantModule  = React.lazy(() => import(/* webpackPrefetch: true */ './modules/ft_merchant_module/src/main'));

В приведенном выше случае, независимо от того, какой URL-адрес, он предварительно загрузит домашний модуль и предварительно загрузит три других модуля с низким приоритетом.

Если вам нужно динамическое поведение, вы можете попробовать использовать плагин: https://github.com/SebastianS90/webpack-prefetch-chunk

После добавления плагина вы можете использовать метод webpack_require.pfc для загрузки фрагментов в фоновом режиме.

const prefetchChunk = chunkName => {
  if (!window.requestIdleCallback) {
    return;
  } else if (chunkName) {
    let chunkArray = [].concat(chunkName);
    window.requestIdleCallback(() => {
      chunkArray.forEach(chunk => {
        __webpack_require__.pfc(chunk);
      });
    });
  } else {
    return;
  }
};
person Indragith    schedule 21.05.2020
comment
Тогда я знаю, но я хочу загрузить первый фрагмент, когда пользователь вызывается из браузера, а затем асинхронно вызывать другие фрагменты в фоновом режиме. - person Muhammad Numan; 21.05.2020
comment
Опция Prefetch сообщит браузеру о загрузке фрагментов во время простоя. Если вам нужен больший контроль над тем, какие фрагменты необходимо предварительно загрузить, вам следует добавить упомянутый плагин в конфигурацию веб-пакета. - person Indragith; 21.05.2020
comment
Я использую приложение для создания реакции. будет ли это работать при создании приложения для реагирования? - person Muhammad Numan; 21.05.2020
comment
В основном да. Я не пробовал создавать приложение для реагирования. Первый вариант подойдет. Если вы собираетесь использовать плагин, вам нужно включить этот плагин в приложение для создания реакции. Это может помочь: dev.to/nodewarrior/ - person Indragith; 21.05.2020

arrow_upward
0
arrow_downward

Оберните маршрутизатор с помощью Suspense, который использует запасной вариант (показывать некоторый контент во время загрузки фрагмента, если он еще не был загружен)...

 import React,{Suspense} from 'react';
 import {Router} from '@reach/router';    

        const HomeModule  = React.lazy(() => import('./modules/ft_home_module/src/main'));
        const AuthModule  = React.lazy(() => import('./modules/ft_auth_module/src/main')) const ProfileModule  = React.lazy(() => import('./modules/ft_profile_module/src/main'));
        const MerchantModule  = React.lazy(() => import('./modules/ft_merchant_module/src/main'));
        const Loading = () => <div>Loading chunk..</div>

            <Suspense fallback={<Loading/>}>
                <Router>
                  <HomeModule path="/home" />
                  <AuthModule path="/auth" />
                  <ProfileModule path="/profile" />
                  <MerchantModule path="/merchant" />
                </Router>
            </Suspense>
person MVS KIRAN    schedule 21.05.2020
comment
Я уже использую это, но оно не работает должным образом, пожалуйста, подготовьте мой вопрос - person Muhammad Numan; 21.05.2020