反應中的延遲加載組件

Question

我正在開發一個遺留的反應應用程序，因此很多部分無法推理而只能被接受。

所以，我有幾個組件加載了很多依賴項，顯然對於第一次渲染並不重要。 因此，我嘗試了以下方法：

  const HeavyComp = lazy(() => import("HeavyComponent.jsx");

  function Home() {
    return <div>
      <HeavyComp />
    </div>
  }

因此， HeavyComponent作為主包的一部分加載，但僅在加載該組件后可見。 這有助於打破腳本時間，但 FCP 仍然很遙遠。

所以，我嘗試了以下方法：

 

  function Home() {
    const [ heavyComponent. setHeavyComponent ] = useState(null);

    useEffect(() => {
      setHeavyComponent(
        lazy(() => import("HeavyComponent.jsx")
      );
    }, []);



    return <div>
      {
        heavyComponent && <heavyComponent />
      }
    </div>
  }

我認為這會有所幫助，但和以前一樣，FCP 仍然被延遲，直到下載、解析和渲染了heavyComponent 。 所以我唯一的選擇是使用setTimeout或更好的requestIdleCallback使其異步。

這是最好的解決方案還是有更好的解決方案？

Answer 1

假設使用 FCP，您指的是“第一個內容繪制”。 最好的選擇是使用Suspense組件。 有了它，您可以添加一個后備加載器組件（在此示例中為<Spinner /> ）。

import { Suspense, lazy } from 'react';

const HeavyComp = lazy(() => import("HeavyComponent.jsx");

function Home() {
    return <div>
      <Suspense fallback={<Spinner />}>
         <HeavyComp />
      </Suspense>
    </div>
}

React 並發模式文檔