javascript - 暂时禁用 react-loadable

Question

使用 react-loadable 时，您不会轻易收到那些异步组件中抛出的错误(如错误导入)的警告。

我希望能够在开发环境中禁用 react-loadable(绕过它，并同步加载所有内容)并在生产环境中启用它，但我不知道如何覆盖 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

您可以通过执行以下操作来尝试根据运行状态导出一个或另一个函数:

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。