Javascript React中的多重暂挂声明

例如，我有以下声明：

场景1:

const ComponentA = lazy(() => import('pages/ComponentA'));
const ComponentB = lazy(() => import('pages/ComponentB'));

<Router>
  <Switch>
     <Suspense fallback={'loading...'}>
       <Route path="/A" component={ComponentA} exact/>
       <Route path="/B" component={ComponentB} exact/> 
     </Suspense>
  </Switch>
</Router>

可以为每个依赖项分离暂挂声明吗？像这样：

代码3

 const Dependency1 = lazy(() => import('component/dependency1'));
 const Dependency2 = lazy(() => import('component/dependency2'));

 const ComponentA = () => {
   return (
     <div>
       <Suspense fallback={'Loading Dependency1'}>
         <Dependency1/>
       <Suspense/>
       <Suspense fallback={'Loading Dependency2'}>
        <Dependency2/>
       <Suspense/>
     </div>
   );
}

const Dependency1=lazy（（）=>import（'component/Dependency1'）；
const Dependency2=lazy（（）=>import（'component/Dependency2'）；
常量组件A=（）=>{
返回(
);
}

然后我将删除路由器文件中的暂挂声明

我的问题是，既然我希望在每个依赖项中都有一个多个单独的加载指示器，那么像代码3这样的结构可以吗

---

由于我正在对每个依赖项进行代码拆分，这种方法是否有性能或每个子组件中的多个请求之类的缺点？

当然，这种方法完全可以，特别是当您希望为不同的组件使用不同的加载程序时

您提到的缺点很小，每个惰性组件都有多个请求，但这并不重要。如果某些组件是有条件的，则最好使用多个加载程序，因为例如，有些用户可能根本不需要

Dependency2

有一件事要考虑的是“装载机杂乱”。从用户体验的角度来看，最好使用框架页面，而不是4-5个不同的加载程序，这些加载程序将单独加载，页面甚至可能意外跳转

 const Dependency1 = lazy(() => import('component/dependency1'));
 const Dependency2 = lazy(() => import('component/dependency2'));

 const ComponentA = () => {
   return (
     <div>
       <Suspense fallback={'Loading Dependency1'}>
         <Dependency1/>
       <Suspense/>
       <Suspense fallback={'Loading Dependency2'}>
        <Dependency2/>
       <Suspense/>
     </div>
   );
}