我目前正在构建我公司网站的新版本，我们选择Nuxt来做。对于我的同事来说，保持内容管理的能力很重要，所以我们将Wordpress作为CMS。然后我们使用Wordpress的REST API生成JSON，并将其注入到网络应用程序中，基本上它只是一个无头的Wordpress。
长话短说，我目前正试图弄清楚如何托管这个怪物，我面临着一个大问题：主页需要15秒加载。幸运的是，应用程序的其余部分在第一次加载方面并不那么糟糕。你可以看看我的谷歌灯塔评分...是的，我很惭愧。

所以也许你想知道，这个可怜的人是如何创造这个的？让我告诉你我是怎么做到的：

• TailwindCSS（with JIT）
• Nuxt@2.15.3
• NuxtI 18 n（含大JSON文件-〉总计12，6个月）
• 该应用程序托管在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/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/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/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秒很多。