构建时的 Gatsby 警告 "query takes too long"

Question

我正在使用 Gatsby 和 Netlify CMS 构建一个静态网站。该网站也托管在 Netlify 上。我有一个博客部分，我从降价文件中为每篇文章生成一个页面。对于我生成的每个文章页面，我在构建“查询时间太长”期间收到以下警告。该网站最终会建立，但随着我生成的页面越来越多，构建时间会越来越长，所以我担心当我的网站中开始有太多文章时，它会变得太长。

我正在为每个由 netlify CMS 创建的降价文件生成一个页面。

您介意查看我在 gatsby-node 文件中的代码以及我在我的博客模板文件中使用的查询，看看我是否做错了什么可以解释构建时警告消息吗？

谢谢

这是我的开发环境

  npmPackages:
    gatsby: ^2.26.1 => 2.26.1
    gatsby-image: ^2.10.0 => 2.10.0
    gatsby-plugin-netlify-cms: ^4.8.0 => 4.8.0
    gatsby-plugin-react-helmet: ^3.8.0 => 3.8.0
    gatsby-plugin-sharp: ^2.13.0 => 2.13.0
    gatsby-plugin-styled-components: ^3.9.0 => 3.9.0
    gatsby-remark-images: ^3.10.0 => 3.10.0
    gatsby-remark-prismjs: ^3.12.0 => 3.12.0
    gatsby-source-filesystem: ^2.9.1 => 2.9.1
    gatsby-transformer-remark: ^2.15.0 => 2.15.0
    gatsby-transformer-sharp: ^2.11.0 => 2.11.0
  npmGlobalPackages:
    gatsby-cli: 2.18.0

这是我在 gatsby-node 文件中获得的代码，用于生成我的 posts 页面

exports.createPages = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions

  const blogPostTemplate = require.resolve(`./src/templates/blog-post.js`)

  const categoryPageTemplate = require.resolve(
    `./src/templates/category-page.js`
  )
  const uncategorizedPageTemplate = require.resolve(
    `./src/templates/uncategorized.js`
  )
  const _ = require("lodash")

  const result = await graphql(`
    {
      posts: allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
      ) {
        edges {
          node {
            id
            frontmatter {
              categories
            }
            fields {
              slug
            }
          }
        }
      }
      categoriesGroup: allMarkdownRemark {
        group(field: frontmatter___categories) {
          fieldValue
        }
      }
    }
  `)
  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  const posts = result.data.posts.edges
  const categories = result.data.categoriesGroup.group

  posts.forEach(({ node }, index) => {
    const nextPostId = index === 0 ? null : posts[index - 1].node.id
    const previousPostId =
      index === posts.length - 1 ? null : posts[index + 1].node.id

    createPage({
      path: `blog${node.fields.slug}`,
      component: blogPostTemplate,
      context: {
        // additional data can be passed via context
        id: node.id,
        index,
        nextPostId
        previousPostId
      },
    })
  })
}

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({
      node,
      getNode,
    })

    createNodeField({
      node,
      name: `slug`,
      value,
    })
  }
}

这是我在我的博客中得到的查询-post 模板文件，用于从 pageContext 中获取带有 id 的 post：

export const pageQuery = graphql`
  query($id: String!, $previousPostId: String, $nextPostId: String) {
    markdownRemark(id: { eq: $id }) {
      id
      html
      frontmatter {
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 1600) {
              ...GatsbyImageSharpFluid_withWebp_tracedSVG
            }
          }
        }
        title
        description
        date(formatString: "MMMM DD, YYYY")
        categories
      }
    }
    previous: markdownRemark(id: { eq: $previousPostId }) {
      frontmatter {
        title
      }
      fields {
        slug
      }
    }
    next: markdownRemark(id: { eq: $nextPostId }) {
      frontmatter {
        title
      }
      fields {
        slug
      }
    }
  }
`

Answer 1

Gatsby 的团队实际上正致力于通过添加一些“缓存”功能来减少构建时间。您可以在他们的 releases notes 中跟踪堆栈跟踪，他们仍处于 Beta 测试阶段（其中一些主要集中在 gatsby develop.

如果你想尝试一下，看看它是否缩短了构建开发时间，你只需要将 Gatsby 升级到最新版本 (^2.28) 并且：

// In your gatsby-config.js
module.exports = {
  // your existing config
  flags: {
    FAST_DEV: true,
  },
}

关于gatsby build，同时，在Netlify中，您可以激活一些插件（例如Gatsby Cache）。

在所有这些东西中，您还可以添加增量构建功能（由伟大的 Jason Lengstorf 在 Netlify's post 中描述）。安装所需的依赖项（升级 Gatsby 和 cross-env）后，只需自定义构建命令（也在 Netlify 的仪表板中）以启用 PAGE_BUILD_ON_DATA 功能：

"build": "cross-env GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages"

构建时的 Gatsby 警告 "query takes too long"

Gatsby warning on build "query takes too long"

graphql

gatsby

netlify