Блог

В настоящее время я создаю новую версию сайта своей компании, и для этого мы выбираем Nuxt. Для моих коллег важно сохранить возможность управлять контентом, поэтому мы сохраняем WordPress в качестве CMS. Затем мы генерируем JSON с помощью REST API WordPress и внедряем его в веб-приложение, в основном это просто безголовый WordPress.

Короче говоря, в настоящее время я пытаюсь понять, как разместить это чудовище, и я столкнулся с большой проблемой: загрузка домашней страницы занимает 15 секунд. К счастью, остальная часть приложения не так уж плоха с точки зрения первой загрузки. Можете ли вы взглянуть на мой рейтинг Google lighthouse?. Да, мне стыдно.

Так что, может быть, вам интересно, как этот бедняга создал это ? Позвольте мне рассказать вам, что я использую для этого :

• Попутный ветер (с JIT)
• Nuxt@2.15.3
• NuxtI18n (с БОЛЬШИМИ файлами 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 секунд-это много.