reactjs - 使用 React 延迟加载模块？

Question

是否可以使用加载重型模块React.lazy？

我有一个非常重的原始文件被解析为字符串（大约 10 mb），我想延迟加载它。

尝试后：

const Module = React.lazy(() =>
  import("./heavyModule").then((heavyModule) => {
    return (
      <Suspense fallback={null}>
        <SomeComponent src={heavyModule.value} />
      </Suspense>
    );
  })
);

我收到以下错误：

lazy: Expected the result of a dynamic $csbImport() call. Instead received: [object Object]

演示

Answer 1

根据您的说法，这heavyModule不是 React 组件

我有一个非常重的原始文件被解析为字符串（大约 10 mb），我想延迟加载它

所以你不能使用React.lazy(). 相反，我建议仅在需要的地方导入原始文件，然后延迟渲染该特定组件。

你可以试试这个方法：

useEffect(()=> {
 import('./heavyModule').then(data=> {
  // your code
 },[])