11

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

有没有办法做到这一点？

4

3 回答 3

2

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

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.

于 2019-05-10T13:38:14.353 回答
1

最简洁的答案是不'。我认为您将不得不重写很多代码。但是，您可以使用服务器端渲染设置开发环境，当 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')
});
于 2019-05-14T23:21:13.660 回答
0

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

new webpack.optimize.LimitChunkCountPlugin({
   maxChunks: 1
}),
于 2020-12-07T10:33:33.460 回答