react-loadable多个资源加载不起作用

Question

为了提高站点性能，我正在考虑将一些我最初不需要的组件拆分为代码。 在寻找了一些选择之后，我决定使用react-loadable 。

根据react-loadable文档，我们可以并行加载多个资源 。 有了这个想法，并在文档中提供了示例代码，我试图实现一个组件，该组件可以获取组件以及呈现该组件所需的数据。 但是我面临的问题是，每次尝试使用Loadable.Map函数时，我都会遇到TypeError: loader is not a function控制台中TypeError: loader is not a function ，仅显示加载状态。 文档是否损坏或我的实现？

Answer 1

loader对象中的项目必须是函数

所以改变

Loadable.Map({
  loader: {
    Post: () => import("./Post"),
    data: fakeAPI()
  },

至

Loadable.Map({
  loader: {
    Post: () => import("./Post"),
    data: () => fakeAPI()
  },

甚至

Loadable.Map({
  loader: {
    Post: () => import("./Post"),
    data: fakeAPI
  },

看到更新的演示： https : //codesandbox.io/s/my19zqk78