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

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
export default options => options.loader(); // Does not work

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

Answer 1

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

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,

Answer 2

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

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

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

import path from 'path';

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

Answer 3

Возможно, вы захотите отключить разделение кода в локальной среде.

      new webpack.optimize.LimitChunkCountPlugin({
   maxChunks: 1
}),