Gatsbyイメージの私の使用法を改善するためのヘルプが必要です

ハロー・フェロー.今日、私はあなたに質問をしています.私は私のバンドルサイズを改善する必要があるので、私はより効率的に私のギャツビー画像ラッパーを書き直したい.
マイバンドル

しかし、150の画像自体は合計で14 MBです.
私は私のコードがBig - Oの点でにおいがするのを知っています、しかし、私の悪い言い訳、私は結果について写像するより別の方法を知りませんでした.皆さん、ここで改善するのを手伝ってくれますか?

const ImageLarge = props => {
  return (
    <StaticQuery
      query={graphql`
        query {
          allFile(filter: { sourceInstanceName: { eq: "assets" } }) {
            edges {
              node {
                relativePath
                name
                childImageSharp {
                  fluid(maxWidth: 600, quality: 100) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      `}

そして今ここで恥の私の山:

 const image = data.allFile.edges.find(n => {
          return n.node.relativePath.includes(`${path + props.src}`)
        })

        if (!image) return null

ところで、私の問題は私の静的なgqlqueryを引数でパラメタ化することができないことから始まっているので、私はすべてのイメージを取りました.恐ろしい不器用.
なぜ私はこのような何かを傾ける?

const ImageLarge = props => {
  return (
    <StaticQuery
      query={graphql`
        query {
          allFile(filter: { sourceInstanceName: { eq: `assets/${name}.png` } }) {
            edges {
              node {
                relativePath
                name
                childImageSharp {
                  fluid(maxWidth: 600, quality: 100) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      `}

私はGoogleに尋ねて、これを見つけました
問題は、gatsbyの静的クエリがテンプレートリテラルで文字列補間をサポートしていないことです
what-is-the-best-way-to-display-all-pictures-of-a-directory-in-a-gatsby-project
もし私がこの問題を解決するのを手伝うことができれば、私はうれしいです、そして、私も、我々がここでそれについて書くべきであると思います.
コードがあなたと共にありますように🙏