@nuxtjs/apollo 模块请求时间很慢5 秒

如何解决@nuxtjs/apollo 模块请求时间很慢5 秒

我的 NuxtJS 和 Apollo 请求有问题。解决请求需要太多时间 - 将近 5 秒。我已经在本地、开发和生产中尝试过。

这是我的 apollo 的 nuxt.config 部分，它指向 WPGraphQL：

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://example.com/graphql',},defaultOptions: {
      // See 'apollo' deFinition
      // For example: default query options
      $query: {
        loadingKey: 'loading',fetchPolicy: 'cache-and-network',

这是我的 Nuxt 页面模板

<template>
  <div>
    <Jumbotron
      v-if="page.frontPage.heroSlider"
      :hero-slider="page.frontPage.heroSlider"
    />
    <Introduction
      v-if="page.frontPage.serviceGroups"
      :service-groups="page.frontPage.serviceGroups"
      :services-image="page.frontPage.servicesImage"
    />
    <CTA
      :cta-text="page.frontPage.ctaText"
      :cta-link="page.frontPage.ctaLink.uri"
      :cta-button-text="page.frontPage.ctaButtonText"
    />
    <BlogGrid />
  </div>
</template>
<script>
import gql from 'graphql-tag'
import Jumbotron from '@/components/FrontPage/Jumbotron'
import Introduction from '@/components/FrontPage/Introduction'
import CTA from '@/components/FrontPage/CTA'
import BlogGrid from '@/components/FrontPage/BlogGrid'
export default {
  components: {
    Jumbotron,Introduction,CTA,BlogGrid,apollo: {
    page: {
      prefetch: true,query: gql`
        query getHomePage {
          page(id: "/",idType: URI) {
            id
            content
            frontPage {
              heroSlider {
                heroSlideText
                heroSlideImage {
                  altText
                  srcSet
                  sourceUrl(size: JUMBOTRON_SIZE)
                }
              }
              serviceGroups {
                iconName
                title
                description
              }
              servicesImage {
                sourceUrl
                srcSet
                altText
              }
              ctaText
              ctaButtonText
              ctaLink {
                ... on Page {
                  id
                  uri
                }
              }
            }
          }
        }
      `,}
</script>

除了这个请求需要超过五秒钟之外，一切都完美呈现。您可以从 GTMetrix 等处查看。基本上 TTFB 是 5.4 秒等。

生产部署到 Vercel 中，这是我的 Vercel 配置>

{
  "builds": [
    {
      "src": "nuxt.config.js","use": "@nuxtjs/vercel-builder","config": {
        "generateStaticRoutes": true
      }
    }
  ]
}

我有一些其他的路由可以正常工作，返回的图像为 70-150 kB，网站不包含大图像或文件。

原始站点在 live ise generator.bm.ee 以衡量质量。所有其他路由的响应时间都很短，但 / 路由的响应非常缓慢。

我还没有找到任何关于如何实现 Nuxt、Apollo 和 WPGraphQL 的好的说明。