如何在 Gatsby 中使用 React.lazy

Question

React.lazy在 Gatsby 中使用时，您会在制作production( gatsby build)时出错React.lazy，suspense在 Gatsby 项目中使用和使用的最佳方法是什么

Answer 1

React.lazy 和 Suspense 还没有做好服务端渲染的准备，但是通过检查代码是否只在客户端执行，它们仍然可以使用。虽然这个解决方案不如可加载组件，它在服务器端和客户端都有效，但它仍然提供了一种替代方案来处理仅客户端的包，而没有额外的依赖。请记住，如果在没有 isSSR 保护的情况下执行以下代码，则可能会中断。

import React from "react"
const ClientSideOnlyLazy = React.lazy(() =>
  import("../components/ClientSideOnly")
)
const MyPage = () => {
  const isSSR = typeof window === "undefined"
  return (
    <>
      {!isSSR && (
        <React.Suspense fallback={<div />}>
          <ClientSideOnlyLazy />
        </React.Suspense>
      )}
    </>
  )
}

如果以上方法对您不起作用，请尝试在 gatsbyjs.com 上遵循本指南