Временно отключить реагирующую загрузку

Question

При использовании react-loadable вас не так легко предупредить об ошибках, возникающих в этих асинхронных компонентах, например, об ошибке импорта.

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

import Loadable from 'react-loadable';
import LoadingComponent from './Loading';

// My reused loadable component everywhere
// In production
export default options =>
  Loadable({
  loading: LoadingComponent,
  delay: 200,
  ...options,
});

// Ideally a dev version that skips loadable
// In development, without any async import
export default options => options.loader(); // Does not work

Есть ли способ сделать это?

Answer 1

Краткий ответ «нет».Я думаю, вам придется переписать много кода.Тем не менее, вы можете настроить среду разработки с рендерингом на стороне сервера, если загрузка выполняется синхронно при SSR.

Используйте аргумент serverSideRequirePath

Это пример использования из этой статьи

import path from 'path';

const LoadableAnotherComponent = Loadable({
  loader: () => import('./another-component'),
  LoadingComponent: MyLoadingComponent,
  delay: 200,
  serverSideRequirePath: path.join(__dirname, './another-component')
});

Answer 2

Вы можете попробовать экспортировать ту или иную функцию на основе состояния выполнения, выполнив что-то вроде этого:

import Loadable from 'react-loadable';
import LoadingComponent from './Loading';

let fn = options => Loadable({
    loading: LoadingComponent,
    delay: 200,
    ...options,
})

if (process.env.NODE_ENV !== 'production') {
    fn = options => Loadable({
         loading: () => null,
    });
}

export default fn;

Параметр loading: () => null необходим, чтобы ничего не отображать.

Теперь вы можете использовать переменную окружения NODE_ENV для загрузки или не загрузки Loadable.