3

我目前正在构建我公司网站的新版本，我们选择 Nuxt 来做。对于我的同事来说，保持管理内容的能力很重要，因此我们将 Wordpress 保留为 CMS。然后我们使用 Wordpress 的 REST API 生成 JSON 并将其注入到 webapp 中，基本上它只是一个无头的 Wordpress。

长话短说，我目前正试图弄清楚如何托管这个怪物，我面临一个大问题：主页需要 15 秒才能加载。幸运的是，应用程序的其余部分在首次加载方面并没有那么糟糕。你可以看看我的谷歌灯塔分数。是的，我很惭愧。

我不可思议的应用优化

请帮我

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

  • TailwindCSS（使用 JIT）
  • Nuxt@2.15.3
  • NuxtI18n（带有 BIG JSON 文件 -> 总共 12,6 Mo）
  • 该应用程序托管在 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 秒很多。

4

0 回答 0