生产环境Nuxt SSR应用首页加载耗时15秒性能问题排查求助

我正在搭建公司官网的新版本，选用Nuxt进行开发。为了方便同事管理内容，我们保留WordPress作为CMS，通过WordPress的REST API生成JSON并注入到web应用中，本质就是Headless WordPress架构。

简而言之，我目前在部署该应用时遇到了严重问题：首页加载耗时长达15秒，所幸应用其余页面的首次加载速度尚可。大家可以查看我的Google Lighthouse评分，结果非常不理想。

技术栈 #

• TailwindCSS (开启JIT模式)
• Nuxt@2.15.3
• NuxtI18n（使用了总大小达12.6MB的大型JSON文件）
• 应用部署在Heroku平台

nuxt.config 配置文件 #

export default {
  devServer: {
    historyApiFallback: true
  },
  
  tailwindcss: {
    configPath: '~/config/tailwind.config.js',
    jit: true
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~/plugins/main.js' },
    { src: '~/plugins/vuex-persist', ssr: false },
    { src: './plugins/vue-awesome-swiper.js', ssr: false },
    { src: '~/plugins/fullpage.js', mode: 'client' },
    { src: '~/plugins/aos.client.js', ssr: false},
    { src: '~plugins/v-calendar.js', ssr: false }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: false,

  buildOptimisations: {
    profile: process.env.NODE_ENV === 'development' ? 'risky' : 'experimental'
  },

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/dotenv',
    [
      'nuxt-i18n',
      {
        locales: [
          {
             code: 'en',
             name: 'English',
             file: 'en-EN.js',
             flagImg: 'english_flag.png'
          },
          {
             code: 'fr',
             name: 'Français',
             file: 'fr-FR.js',
             flagImg: 'french_flag.png'
          },
          {
            code: 'de',
            name: 'Deutsch',
            file: 'de-DE.js',
            flagImg: 'german_flag.png'
         },
        ],
        lazy: true,
        langDir: 'lang/',
        defaultLocale: 'fr',
        parsePages: true,
        vueI18n: {
          fallbackLocale: 'fr',
        },
        vuex: {
          moduleName: 'i18n',
        },
        seo: false,
        detectBrowserLanguage: false,
      }
    ]
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/config-axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/config-pwa
    '@nuxtjs/pwa',
    'nuxt-leaflet',
    'vue-social-sharing/nuxt',
    '@nuxtjs/composition-api/module',
    '@nuxtjs/dayjs'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true
  },

  // PWA module configuration: https://go.nuxtjs.dev/config-pwa
  pwa: {
    manifest: {
      lang: 'fr'
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extend(config, ctx) {
      config.node = {
        fs: "empty"
      }
    },
    parallel: true,
    cache: true,
    hardSource: true,
    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: true,
        trimCustomFragments: true,
        useShortDoctype: true,
        removeComments: true,
        preserveLineBreaks: false,
        collapseWhitespace: true
      }
    },
    loaders:  {
      vue: {
        prettify: false
      }
    },
    transpile: ['vee-validate'],
    postcss: {
      plugins: {
        "postcss-custom-properties": true
      },
    },
    extractCSS: false
  },
}

我已经做了多项优化：将页面拆分为多个组件、尽量减少页面加载的JSON数据量、使用vue-lazyhydrate、尝试异步加载组件，但都没有效果。15秒的加载耗时仍过高，希望能得到帮助排查问题。

优先排查高权重问题 #

• 12.6MB的i18n多语言文件是核心瓶颈，即使开启了懒加载，首页默认加载的单语言文件大小也需要先做校验：拆分多语言文件，只在首页加载首页需要用到的翻译词条，其余页面的翻译词条做路由级懒加载，不要全量打包到单语言文件中。翻译词条建议做压缩存储，生产环境加载gzip后的压缩文件，可将体积压缩到原有的1/5左右。
• Heroku免费/低配实例的冷启动耗时本身可达3-10秒，你只有首页加载慢其余页面正常，大概率命中了冷启动问题：要么升级Heroku实例配置开启预热，要么将静态资源托管到CDN，Nuxt 2建议开启静态生成模式（target: static）预渲染首页，完全避免服务端冷启动耗时。

配置优化调整 #

• 你当前配置的extractCSS: false会将所有CSS打包到JS文件中，开启extractCSS: true拆分CSS独立文件，可减少JS文件体积，加快解析速度。
• 关闭hardSource: true，该插件在Nuxt 2.15+版本存在缓存失效、打包体积异常增大的问题，生产环境构建建议直接移除该配置。
• 首页依赖的客户端插件（swiper、fullpage、aos、v-calendar等）不要全局注册，改为在首页组件中按需引入，避免全局JS包体积冗余。

首屏资源校验 #

• 打开浏览器控制台Network面板，筛选首页加载的资源排序，查看体积最大、耗时最长的资源类型：如果是WordPress API请求耗时过长，建议给API接口添加CDN缓存，或者在Nuxt构建阶段预拉取首页需要的CMS数据直接注入到静态页面中，不用用户端发起请求拉取。
• 检查首页的图片资源是否未做压缩、未使用webp格式，大图添加懒加载配置，避免阻塞首屏渲染。

内容的提问来源于stack exchange，提问作者Patrick