如何在 Gatsby 中使用 React.lazy

Posted 2023-03-07

【中文标题】如何在 Gatsby 中使用 React.lazy

【英文标题】：How to use React.lazy in Gatsby

【发布时间】：2020-11-13 22:19:35

【问题描述】：

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

【参考方案1】：

React.lazy 和 Suspense 还没有准备好进行服务器端渲染，但仍然可以通过检查代码是否仅在客户端上执行来使用它们。尽管此解决方案不如可加载组件，后者在服务器端和客户端都有效，但它仍然提供了处理仅客户端包的替代方案，而无需添加依赖项。请记住，如果在没有 iss-s-r 保护的情况下执行以下代码，则可能会中断。

import React from "react"
const ClientSideOnlyLazy = React.lazy(() =>
  import("../components/ClientSideOnly")
)
const MyPage = () => 
  const iss-s-r = typeof window === "undefined"
  return (
    <>
      !iss-s-r && (
        <React.Suspense fallback=<div />>
          <ClientSideOnlyLazy />
        </React.Suspense>
      )
    </>
  )

如果以上方法不适合您，请尝试关注this guide on gatsbyjs.com

【讨论】：

关于为什么 laze-Suspense 在运行“gatsby develop”但“gatsby build”失败时工作的任何建议？它有什么不同？

@sale108 Gatsby 默认不在开发模式下运行 s-s-r。这导致一些用户在部署 gatsby 应用时发现由于 s-s-r 存在仅生产问题。但是，您可以运行 s-s-r 模式，将 DEV_s-s-r 标志添加到您的 gatsby-config.js：module.exports = flags: DEV_s-s-r: true , plugins: [...] 在 Gatsby 讨论中了解更多信息：github.com/gatsbyjs/gatsby/discussions/28138