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 個不同的加載器，它們將分別加載，頁面甚至可能會意外跳轉。