在React中实现组件的懒加载

Question

我正在处理一个遗留的React应用程序，因此很多部分无法进行推理，只能被简单接受。

所以，我有几个组件会加载大量的依赖项，显然对于第一次渲染并不重要。因此，我尝试了以下做法：

  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 使其异步。

这是最好的解决方案吗？还有更好的选择吗？

- Uday Reddy

---

什么是 FCP?您能先澄清一下吗？ - windmaomao

好的，你可能正在寻找一个叫做“Suspense”的东西，可以查看React并发编程的相关文档：https://reactjs.org/docs/concurrent-mode-suspense.html - windmaomao

这适用于不需要立即呈现的组件。例如，{ isTrue()? <div>True</div>: <Header /> }。在这种情况下，Header根本没有被下载，只有在需要时才会下载。 - Uday Reddy

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并发模式文档

- Carlos Cruz

---

这适用于不必立即呈现的组件。例如，{isTrue()？<div>True</div>: <Header />} 。在这种情况下，Header根本没有被下载，只有在需要时才会下载。 如果组件需要立即呈现，则您的FCP将在Header被下载和执行后进行。 - Uday Reddy