Javascript 如何在react中有条件地延迟加载动态导入？

我希望仅在加载图像以确定第一次绘制的优先级后，才触发react组件的动态导入。问题是，它是一个上下文提供程序组件，因此有一些问题

因此，我在文件

auth.js

中有一个动态导入：

   const AuthContextPreloader = hasWindow
   ? lazy(() => import("./AuthContextPreloader"))
   : null;

  useEffect(() => {
    props.heroLoaded && **trigger the lazyload**;
  }, [props.heroLoaded]);

我在一个单独的组件中有一个图像：

   <img
      ref={() => hasWindow && imageLoaded()}
      className={styles.optionsImageImg}
      alt={"nav"}
      src={didLoad && thumb.jpg}
      type="image/jpeg"
    />

在

auth.js

中尝试实现这一点的一些伪代码：

   const AuthContextPreloader = hasWindow
   ? lazy(() => import("./AuthContextPreloader"))
   : null;

  useEffect(() => {
    props.heroLoaded && **trigger the lazyload**;
  }, [props.heroLoaded]);

---

但完全不确定如何实现这一点。谢谢。

您不必担心组件何时加载。您应该关心的是何时提交。诸如此类：

const authContextPreload=hasWindow
? 惰性（（）=>导入（“./authContextPreload”））
：null；
功能组件（道具）{
返回props.heroLoaded？：空；
}

这样，您将不会考虑内部组件，而是呈现当前应用程序状态。

编辑 从评论中可以明显看出，您关心的不是组件itslef，而是很大的依赖性

在这种情况下，您可以执行以下操作：

功能组件（道具）{
返回props.heroLoaded？：空；
}
函数authContextPreload（道具）{
让[dependencyState，setDependencyState]=useState（“未加载”）；
useffect（函数（）{
导入（“大依赖项”）
.then（功能（模块）{
//返回所需的默认导出或命名导出，或跳过此步骤
返回module.default；
})
.然后（职能部门（dep）{
//对依赖项执行某些操作，然后更改状态
setDependencyState（“加载”）；
});
}, []);
if（depenencyState==“未加载”）返回null；
返回。。。；
}

我关心的原因是因为该组件导入firebase（70kb+），这就是我推迟导入的原因。但它将在

heroRendered

之前不会呈现。此外，如果您关心firebase，您可以在

useEffect

中动态加载和初始化它，因此，只有在组件被删除后，它才会被导入render@user1088793是否需要导入整个firebase默认模块？或者您是否考虑过使用更具选择性的导入？@ezhikov此延迟默认情况下加载模块，而不管我认为的条件如何。。