如何使用React延迟加载导入Json文件？

Question

我想在我的React应用程序中实现延迟加载，但是大多数文件都是JSON。当视口宽度小于（例如） 768像素，当不需要它们时，我不想将它们加载到桌面应用程序中。有什么方法可以使用React.lazy（）加载JSON文件吗？

我的JSON文件是通过Adobe After Effects扩展名生成的：'Bodymovin'，后来我像这样导入此文件：

import * as background from './background.json';
import * as backgroundLarge from './background-large.json';
import * as backgroundMedium from './background-medium.json';
import * as backgroundMobile from './background-mobile.json';
import * as backgroundSmallMobile from './background-smallMobile.json';
import * as tree from './tree.json';
import * as treeLarge from './tree-large.json';
import * as treeMedium from './tree-medium.json';
import * as treeMobile from './tree-mobile.json';
import * as treeSmallMobile from './tree-smallMobile.json';

我试图像其他任何具有默认导出功能的组件一样正常加载它，但是它不起作用。

const treeMedium = lazy(() => import('./tree-medium.json'));

当我正常导入JSON时，我以后会像这样使用它：

backgroundOptions: {
      loop: true,
      autoplay: true,
      animationData: background.default,
    },

并将此对象从Lottie传递到react-lottie组件中>

我可以将其转换为延迟加载，还是我在想错吗？

我想在我的React应用程序中实现延迟加载，但是大多数文件都是JSON。当视口宽度小于（例如） 768px，我不想将它们加载到桌面中...

Answer 1

这不是React组件，因此您不应将其包装到lazy调用中。基本上，您只需要加载它并履行承诺即可。类似于：