Gatsby 图像优化 - 有没有办法减少页面数据文件夹中生成的 GraphQL json 文件的大小？

Question

我正在开发一个 Gatsby 站点，我想在将其上传到 Netlify 之前对其进行优化。除了 448kb 的 react_devtools_backend.js！（希望我可以通过切换到 Preact 摆脱...）查询）我创建了自己的图像组件如下：

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Img from "gatsby-image";

const Image = props => {
  const data = useStaticQuery(graphql`
    {
      allFile(filter: { extension: { eq: "jpg" } }) {
        nodes {
          relativePath
          name
          childImageSharp {
            fluid(maxWidth: 1000, quality: 90, webpQuality: 90) {
              ...GatsbyImageSharpFluid_withWebp_tracedSVG
            }
          }
        }
      }
    }
  `);

  const image = data.allFile.nodes.find(img =>
    img.relativePath.includes(props.filename)
  );

  if (!image) {
    return null;
  }

  const imageFluid = image.childImageSharp.fluid;
  return (
    <Img
      className={props.className}
      alt={props.alt}
      fluid={imageFluid}
      imgStyle={props.style}
    />
  );
};

export default Image;

在运行 gatsby 构建和服务之后，我可以看到在 public/page-data/sq/d 文件夹中生成了一些 json 文件，其名称类似于 63159454.json，看起来它们包含 graphQL浏览器正在进行的查询。这些文件之一是 43.3kb 本身。有谁知道我是否以次优方式使用 Gatsby，如果是，有没有办法减少这些 json 文件？

Answer 1

您是运行一个 GraphQL 查询，它为构建中的每个图像获取数据。是的，这是非常次优的。您试图避免的路径（您在页面查询中指定 image/images 所需的路径）是 Gatsby 推荐的解决方案。

另一种选择是使用托管和转换图像的外部服务（例如 CMS、Imgix、Cloudinary 等）。这将让您只获取构建 src 和 srcset 属性所需的信息，这可能会减少数据量，并且在任何情况下都是您针对每张图像执行的操作——而不是在单个图像中- 在一个地方为每个图像获取数据的构思组件。

例如，使用 Sanity，我对页面的 GraphQL 查询如下所示：

{
  sanityPage (slug: { current: { eq: "/home/" } }) {
    title
    heroImage {
      asset {
        _id
      }
    }
  }
}

这提供了我需要的数据来呈现多种尺寸的完全响应图像，如下所示：

import Image from "gatsby-plugin-sanity-image"

export default ({ title, heroImage }) => 
  <div>
    <h1>{title}</h1>
    <Image {...heroImage} width={1440} height={400} alt="" />
  </div>

由于图像是与内容一起定义的，因此无需在 GraphQL 查询中显式创建该关联。

Gatsby 图像优化 - 有没有办法减少页面数据文件夹中生成的 GraphQL json 文件的大小？

Gatsby Image Optimizations - Is there a way to reduce size of generated GraphQL json files in page-data folder?

optimization

reactjs

graphql

gatsby

gatsby-image