Prefetch & preload issues

[klienjoy]

Environment

---

• Operating System: Darwin
• Node Version: v18.13.0
• Nuxt Version: 3.2.0
• Nitro Version: 2.2.1
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, i18n, app, css, vite, build, nitro, runtimeConfig
• Runtime Modules: @pinia/[email protected], @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

...

Describe the bug

Hey everyone.
I have an issue with multiple preloads during the build. In production mode nuxt adds preloads & prefetch links for each file. It's killing LCP and FCP performance. I believe it's related to: nuxt/nuxt#13778 and seems it has been resolved here nuxt-contrib/vue-bundle-renderer#30.
But i didn't find anything in docs 👀

i18n: {
    locales: [
      {
        code: 'en',
        file: 'en_US.json',
      },
      {
        code: 'fr',
        file: 'fr_FR.json',
      },
      {
        code: 'es',
        file: 'es_ES.json',
      },
      ...
    ],
    strategy: 'no_prefix',
    detectBrowserLanguage: false,
    lazy: true,
    langDir: 'translates',
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
    },
  },

Additional context

No response

Logs

No response

[koronowicz]

I think this is also related to nuxt/nuxt#18376 (comment) there is a hack to remove prefetch'es

[klienjoy]

Thx @koronowicz, but this solution is for nuxt 2 if im not mistaken.

This hack from the same thread works 👍

    nuxt.hook('build:manifest', (manifest) => {
      for (const key in manifest) {
        // remove all prefetch links for now. LCP & FCP killer
        manifest[key].dynamicImports = [];
        manifest[key].imports = [];
      }
    });

[videmann]

Any ideas?

[ziadsarour]

Thx @koronowicz, but this solution is for nuxt 2 if im not mistaken.

This hack from the same thread works 👍

    nuxt.hook('build:manifest', (manifest) => {
      for (const key in manifest) {
        // remove all prefetch links for now. LCP & FCP killer
        manifest[key].dynamicImports = [];
        manifest[key].imports = [];
      }
    });

It doesn't work for me in 3.2.3. I've tried in nuxt.config with hooks property and by creating a new plugin

[klienjoy]

@ziadsarour Works for me as a module in 3.2.3
Try:
Create some file in /modules folder -> f.e buildOptions.js. Make sure you have lazy: true in i18nOptions. It also removed all not needed preloads & prefetches for assets like svgs :) I have 100 performance scores

export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook('build:manifest', (manifest) => {
      for (const key in manifest) {
        // remove all prefetch links for now. LCP & FCP killer
        manifest[key].dynamicImports = [];
        manifest[key].imports = [];
      }
    });
  },
});

[ziadsarour]

@ziadsarour Works for me as a module in 3.2.3 Try: Create some file in /modules folder -> f.e buildOptions.js. Make sure you have lazy: true in i18nOptions. It also removed all not needed preloads & prefetches for assets like svgs :) I have 100 performance scores

export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook('build:manifest', (manifest) => {
      for (const key in manifest) {
        // remove all prefetch links for now. LCP & FCP killer
        manifest[key].dynamicImports = [];
        manifest[key].imports = [];
      }
    });
  },
});

I've just realized I'm in the i18n module repo, I'm coming from a comment in the nuxt repo (so I didn't set the lazy: true option).
It's still not working :/

Here is my nuxt.config if you have some time to help me make this work.

nuxt.config

import pkg from './package.json'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: true,
  build: {
    transpile: [
      /@fortawesome/,
      /image-edge/,
      'node-mailjet',
    ],
  },
  typescript: {
    strict: true,
    typeCheck: true,
  },
  modules: [
    '@nuxt/content',
    '@nuxt/image-edge',
    '@kevinmarrec/nuxt-pwa',
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
    locales: ['fr'],
    defaultLocale: 'fr',
    markdown: {
      remarkPlugins: [
        'remark-reading-time',
      ],
    },
  },
  css: [
    '~/assets/styles/global.less',
    '@fortawesome/fontawesome-svg-core/styles.css',
    'floating-vue/dist/style.css',
    'vanilla-cookieconsent/dist/cookieconsent.css',
    'vue-final-modal/style.css',
  ],
  sourcemap: {
    client: process.env.NODE_ENV === 'production' ? false : true,
    server: true,
  },
  vite: {
    css: {
      preprocessorOptions: {
        less: {
          additionalData: '@import "@/assets/styles/global.less";',
        },
      },
    },
  },
  nitro: {
    compressPublicAssets: {
      gzip: true,
      brotli: true,
    },
    prerender: {
      routes: [
        '/sitemap.xml',
      ],
    },
    plugins: [
      '~/server/plugins/mailjet.ts',
      '~/server/plugins/meilisearch.ts',
      '~/server/plugins/mongo.ts',
      '~/server/plugins/redis.ts',
    ],
    routeRules: {
      // Specials
      '/_nuxt/**': {
        headers: {
          'Cache-Control': 'public, max-age=31536000',
        },
      },
      '/sw.js': {
        headers: {
          'Cache-Control': 'public, max-age=31536000',
        },
      },
      // Client
      '/': {
        swr: 31536000,
        static: true,
      },
      '/blog/**': {
        swr: 31536000,
        static: true,
      },
      '/catalog/**': {
        swr: 31536000,
      },
      '/links/**': {
        swr: 31536000,
        static: true,
      },
      '/newsletter/**': {
        swr: 31536000,
        static: true,
      },
      '/search/**': {
        swr: 31536000,
        static: true,
      },
      '/images/**': {
        swr: 31536000,
        static: true,
      },
    },
  },
  app: {
    head: {
      htmlAttrs: {
        lang: 'fr',
      },
      meta: [
        { name: 'charset', content: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'theme-color', content: '#FFF' },
        { name: 'apple-mobile-web-app-capable', content: 'yes' },
        { name: 'apple-mobile-web-app-title', content: 'test' },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'default' },
        { name: 'apple-itunes-app', content: 'app-id=myAppStoreID, app-argument=myURL' },
      ],
      link: [
        { rel: 'icon', type: 'image/png', href: '/favicon.png' },
        { rel: 'apple-touch-icon', sizes: '512x512', href: 'icon.png' },
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
        { href: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet' },
      ],
    },
  },
  image: {
    ipx: {
      maxAge: 31536000,
    },
  },
  pwa: {
    workbox: {
      enabled: process.env.NODE_ENV === 'production',
    },
    icon: {
      sizes: [ 64, 72, 96, 120, 128, 144, 152, 180, 192, 384, 512 ],
    },
    meta: {
      ogDescription: false,
      ogImage: false,
      ogSiteName: false,
      ogTitle: false,
      ogType: false,
      ogUrl: false,
      twitterCard: false,
      favicon: false,
      title: false,
      description: false,
      mobileApp: false,
      mobileAppIOS: false,
      appleStatusBarStyle: false,
    },
    manifest: {
      name: 'test',
      short_name: 'test',
      description: 'test',
      lang: 'fr',
      id: 'blog/',
      start_url: '/blog',
      scope: '/',
      display: 'standalone',
      orientation: 'portrait',
      background_color: '#FFF',
      theme_color: '#FFF',
      prefer_related_applications: true,
      related_applications: [
        {
          platform: 'play',
          url: 'https://play.google.com/store/apps/details?id=com.example.app',
          id: 'com.example.app'
        },
      ],
    },
  },
  runtimeConfig: {
  },
});

[jpengelbrecht]

been having the same issue as well. would be great if this can get a fix