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

这是从示例用法 这篇文章

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