反应可加载的多资源加载不起作用

Question

为了提高站点性能，我正在考虑对一些我在初始构建时不需要的组件进行代码拆分。在寻找了一些选项后，我决定选择 react-loadable.

根据 react-loadable 文档，我们可以加载 multiple resources in parallel. With this idea and the example code given into the docs I was trying to implement 一个组件，该组件获取组件以及渲染组件所需的数据。但我面临的问题是，每次我尝试使用 Loadable.Map 函数时，我都会在控制台中得到一个 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

反应可加载的多资源加载不起作用

react-loadable multiple resource loading not working

javascript

reactjs

optimization

code-splitting

react-loadable