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>

如果ComponentA的加载依赖关系仅为 1，则此场景很好。

但是对于场景 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>
   );
}

然后我将删除路由器文件中的 Suspense 声明...

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

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

Answer 1

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

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

要考虑的一件事是“装载机混乱”。 从 UX 的角度来看，最好有骨架页面，而不是 4-5 个不同的加载器，它们将分别加载，页面甚至可能会意外跳转。