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

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

我在 Gatsby 网站上工作，我想在将其上传到 Netlify 之前对其进行优化。除了 448kb 的 react_devtools_backend.js！（希望我可以通过切换到 Preact 来摆脱...）我在应用程序中使用了多个图像（当前将它们存储在本地，但会考虑使用 Netlify Large Media）而不是创建多个 GraphQL 查询（或多个搜索在一个查询）我创建了自己的图像组件，如下所示：

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 build 和 serve 后，我可以看到在 public/page-data/sq/d 文件夹中生成了一些 json 文件，名称类似于 63159454.json，看起来它们包含浏览器正在执行的 graphQL 查询。其中一个文件本身就是 43.3kb。有谁知道我是否以次优方式使用 Gatsby，如果是，有没有办法减少这些 json 文件？

解决方法

您正在运行一个 GraphQL 查询，该查询为您的构建中的每个图像获取数据。是的，这是非常次优的。您试图避免的路径（您在页面查询中指定所需的图像/图像）是 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 查询中显式创建该关联。