暂时禁用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。

Answer 2

简短的回答是“不”。我认为你必须重写很多代码。但是，您可以设置一个带有服务器端渲染的开发环境，当SSR时，react-loadable是同步的。

使用参数serverSideRequirePath

这是来自this article的用法示例

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
}),