反应中的延迟加载组件答案

【问题标题】：Lazy load components in react反应中的延迟加载组件
【发布时间】：2021-12-31 10:30:32
【问题描述】：

我正在开发一个遗留的 react-app，因此很多部分无法推理，只能接受。

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

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

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

【问题讨论】：

什么是FCP？你能先澄清一下吗？
好的，你可能正在寻找一个叫做 Suspense 的东西，寻找 react 并发编程，reactjs.org/docs/concurrent-mode-suspense.html
这适用于不必立即渲染的组件。例如，{ isTrue()? <div>True</div>: <Header /> }。在这种情况下，根本不下载 Header，仅在需要时才下载。

标签： javascript reactjs frontend web-performance

【解决方案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 concurrent-mode documentation

【讨论】：

这适用于不必立即渲染的组件。例如，{ isTrue()? <div>True</div>: <Header /> }。在这种情况下，根本不下载 Header，仅在需要时才下载。如果要立即渲染组件，则您的 FCP 在标头下载并执行之后。