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

暂时停用react-loadable

3 个答案: