Nuxt 和 Laravel 的 15000 毫秒 TTFB 等待时间

问题描述

我遇到了很长的 TTFB 时间，大约 15000/17000 毫秒和一个 GET 请求。这只发生在一个特定的调用中，其他都很好。

我是在添加 Nuxt Auth 和 Laravel Sanctum 后才开始体验这个的。 在完成请求并给出 JSON 结果之前，请求保持挂起状态（在调试器网络选项卡下）大约 10 秒。

这是我的nuxt.confing.js

RecyclerView::setAdapter

Nuxt 页面（为了方便我只放了js代码）

export default {
  srcDir: 'resources/nuxt',ssr: false,head: {
    titleTemplate: '%s - ' + process.env.APP_VERSION,title: process.env.APP_NAME || '',meta: [
      { charset: 'utf-8' },{
        name: 'viewport',content: 'width=device-width,initial-scale=1'
      },{
        hid: 'description',name: 'description',content: process.env.npm_package_description || ''
      }
    ],link: [
      { rel: 'icon',type: 'image/x-icon',href: '/favicon.ico' },{ rel: 'stylesheet',href: 'https://raw.githack.com/lucperkins/bulma-dashboard/master/dist/bulma-dashboard.css' }
      ]
  },loading: { color: '#fff' },css: [
    '@/assets/main.scss'
  ],plugins: [
    "~/plugins/vee-validate.js"
  ],components: true,buildModules: [
    '@nuxtjs/dotenv','@nuxtjs/eslint-module','@nuxtjs/fontawesome','@nuxtjs/moment',],modules: [
    'nuxt-laravel',// Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios','nuxt-buefy','nuxt-fontawesome','@nuxtjs/auth-next'
  ],build: {
    transpile: [/@fullcalendar.*/,"vee-validate/dist/rules"],extend(config,ctx) {
      config.module.rules.push({
        enforce: 'pre',test: /\.(js|vue)$/,loader: 'eslint-loader',exclude: /(node_modules)/,options: {
          fix: true
        }
      })
    }
  },axios: {
    baseURL: process.env.API_URL,debug: true,credentials: true
  },auth: {
    redirect: {
      login: '/login',logout: '/',callback: '/login',home: '/dashboard/'
    },strategies: {
      'laravelSanctum': {
        provider: 'laravel/sanctum',url: process.env.API_URL
      }
    },localStorage: false
  },buefy: {
    materialDesignIcons: false,defaultIconPack: 'fas',defaultIconComponent: 'font-awesome-icon'
  },router: {
    base: '/dashboard/',linkActiveClass: 'is-active',middleware: ['auth']
  },fontawesome: {
      icons: {
        solid: true
      }
  }
}

Laravel 控制器 组件“Fullcalendar”通过“resources: '/api/sessions'”运行一个GET请求，该请求转到以下代码。

<script>
// https://www.tutsmake.com/laravel-vue-js-full-calendar-example/
import FullCalendar from '@fullcalendar/vue'
import timeGridPlugin from '@fullcalendar/timegrid'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'

export default {
  components: {
    FullCalendar
  },data() {
    return {
      sessions: [],todayDisabled: true,calTitle: '',calendarOptions: {
        plugins: [timeGridPlugin,resourceTimelinePlugin],schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',initialView: 'timeGridWeek',refetchResourcesOnNavigate: true,-->>    resources: '/api/sessions',//the very long call
        eventDisplay: 'block',contentHeight: 'auto',nowIndicator: true,locale: 'en-gb',timezone: 'Europe/London',// without this,after Daylight Saving Time the event goes 1 hour back
        headerToolbar: false,businessHours: [
          {
            daysOfWeek: [1,2,3,4,5],startTime: '08:00',endTime: '20:00'
          },{
            daysOfWeek: [6],startTime: '9:00',endTime: '14:00'
          }
        ],slotMinTime: '07:00:00',slotMaxTime: '24:00:00',expandRows: true,eventClick: (calendar) => {
          this.$router.push({
            name: 'calendar-id-sessiondate',params: {
              id: calendar.event.id,sessiondate: this.$moment(calendar.event.start).format(
                'YYYY-MM-DD'
              )
            }
          })
        },datesSet: (dateInfo) => {
          this.calTitle = dateInfo.view.title
          this.todayDisabled = this.$moment().isBetween(
            dateInfo.start,dateInfo.end
          )
        }
      }
    }
  }
}
</script>

ps：我还尝试查看问题是否出在 Fullcalendar 上。通过 axios 调用，问题仍然存在。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）