reactjs - 使用 gatsby-image 图像加载缓慢

Question

我有这个网站:https://zeitouni.herokuapp.com其中有很多高质量的图像。当用户第一次加载网站时，gatsby-image 需要很长时间才能加载大部分图像。该项目的 repo 在这里:https://github.com/EliranGooner/zeitouni

我怀疑的第一件事是图像尺寸。我不确定我应该争取哪种尺寸，以使图像加载更快。问题也可能是我用来获取图像的组件。这是我在 Spectrum 上发现的一种方法，建议使用它来解决无法使用 Graphql 对查询进行插值的问题。该组件如下所示:

const Image = ({ imgName, ...props }) => (
  <StaticQuery
    query={graphql`
      query {
        allImageSharp {
          edges {
            node {
              fluid(maxWidth: 1200, quality: 100) {
                ...GatsbyImageSharpFluid
                originalName
                presentationWidth
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.allImageSharp.edges.find(
        edge => edge.node.fluid.originalName === imgName
      )
      if (!image) {
        return null
      }
      return <Img fluid={image.node.fluid} {...props} />
    }}
  />
)

Answer 1

您的 hero 组件正在加载大 png 格式的 Logo ，而没有利用您的图像组件并为不同的显示器创建各种图像尺寸。

参见: https://github.com/EliranGooner/zeitouni/blob/master/src/components/hero.js#L5