React 中的多个 Suspense 声明

Question

例如我有这样的声明：

场景一：

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>

如果 的加载依赖性仅为ComponentA1，则这种情况就很好。

但对于场景 2：如果我有多重依赖怎么办ComponentA？

代码2

import Dependency1 from 'component/dependency1';
import Dependency2 from 'component/dependency2';

const ComponentA = () => {
   return (
     <div>
       <Dependency1/>
       <Dependency2/>
     </div>
   );
}

可以将每个依赖项的 Suspense 声明分开吗？像这样：

代码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>
   );
}

然后我将删除 Router 文件中的 Suspense 声明...

我的问题是，可以使用像Code 3这样的结构吗，因为我想在每个依赖项中都有多个单独的加载指示器？

由于我对每个依赖项进行代码分割，这种方法是否有任何缺点，例如性能或每个子组件中的多个请求？

Answer 1

当然，这种方法完全没问题，特别是当您想为不同的组件使用不同的加载器时。

您提到的一个小缺点是每个惰性组件都有多个请求，但这并不重要。Dependency2例如，如果某些组件是有条件的，那么使用多个加载器甚至会更好，因为有些用户甚至可能根本不需要。

需要考虑的一件事是“装载机混乱”。从 UX 角度来看，使用骨架页面可能会更好，而不是使用 4-5 个不同的加载器，这些加载器将单独加载，甚至页面可能会意外跳转。