暂时禁用 react-loadable答案

【问题标题】：Temporarily disable react-loadable暂时禁用 react-loadable
【发布时间】：2018-12-18 19:25:57
【问题描述】：

使用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

有没有办法做到这一点？

【问题讨论】：

一定要用react-loadable还是可以用suspense？

标签： javascript reactjs react-loadable

【解决方案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。

【讨论】：

好吧，如果你这样做，它永远不会渲染任何东西。我正在寻找的是一种绕过 react-loadable 的方法，它只需一次下载所有内容

【解决方案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')
});

【讨论】：

【解决方案3】：

您可能需要考虑在本地环境中关闭代码拆分。

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

【讨论】：