Nuxt.js: Preloading hashed, static assets with rel="preload"

[mixn]

Hey there,

I wanted to add a link tag with rel="preload" for two fonts that I am using, so that the priority in which they are loaded is higher (especially when coming from a ServiceWorker, since they are currently prioritized as lowest — which slows down things).

I added this to my nuxt.config.js inside the link array, where all other links are:

{
  rel: 'preload',
  as: 'font',
  crossorigin: 'crossorigin',
  type: 'font/woff2',
  href: 'fonts/ApercuPro.woff2'
}

The problem I am experiencing is that the preloaded font is now being loaded twice, once the hashed version, the other time the raw, original one as can be seen here:

Ideally, only the hashed version of the file should be referenced inside href, just like Nuxt already does this with all other references to that particular file (e.g. url(/_nuxt/fonts/ApercuPro.5398148.woff2) inside style).

Sorry if I am missing something here and thank you for your feedback in advance. :) Been a happy user for a while now. ❤️ Also glad to help in any way, if I can!

_{This bug report is available on Nuxt.js community (#c1343)}

[Atinux]

Hi @mixn

Normally you don't have to add yourself the preload link since Nuxt.js does it for you if you're using it into your application.

Does it perform the preload of the hased version if you remove your link into nuxt.config.js?

(Please mention me so I can keep track of this issue).

[Atinux]

@mixn, can you try this:

nuxt.config.js

module.exports = {
  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type)
      }
    }
  }
}

More informations on https://ssr.vuejs.org/en/api.html#shouldpreload

[mixn]

Thank you for your quick response, @Atinux, really appreciate it! 💯

Nuxt does preload some scripts, but not the .woff2 fonts, which is why I wanted to add

<link rel=preload as=font crossorigin=crossorigin type="font/woff2" href="/fonts/FontName.hash.woff2">

to the head.

If I don’t add anything to nuxt.config.js, only the aforementioned scripts get preloaded.

With

module.exports = {
  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type)
      }
    }
  }
}

in place, the font is still not preloaded. If I add this

{
  rel: 'preload',
  as: 'font',
  crossorigin: 'crossorigin',
  type: 'font/woff2',
  href: 'fonts/FontName.woff2'
}

plus the code suggested above, the font gets loaded twice.

Hope I am not missing anything. And thank you for your feedback! 👍

[Atinux]

@mixn do you have a repo where I can try your implementation?

[mixn]

@Atinux I’ve added you as a collaborator and pushed the relevant stuff on a separate branch (font-preload). Hope that helps? Thank you!

[Atinux]

Can you add @pi0 as well please?

[mixn]

@Atinux @pi0 ✅ Thank you.

[pi0]

@mixn After some investigations with @Atinux , we have finally found the problem! It was with webpack scope hoisting which is not working well with server-renderer (SSR and Client bundle assets differ so it couldn't detect non js files for preload). Unit tests also updated to prevent this bug happening with future updates.

[mixn]

@pi0 @Atinux Thank you both so much! Happy it wasn’t a misunderstanding on my side — I kinda started to think that it was. 😆 Anything else I can do here? 🤓 Please let me know. And thank you again!

Edit:

[pi0]

Should be fixed with rc8 now :) @mixn please reopen or mention if the problem still exists.

https://github.com/nuxt/nuxt.js/releases/tag/v1.0.0-rc8

[mixn]

@pi0 Upgraded to rc8. By adding

{ rel: 'preload', as: 'font', crossorigin: 'crossorigin', type: 'font/woff2', href: 'fonts/MyFont.woff2' }

the font still gets loaded twice. By not adding the code above, there is no link with rel="preload" as="font" added to the head (as it is the case with some scripts).

Hope I’m not missing something. :)

[pi0]

@mixn Do you add render.shouldPreload too? I'm on mobile but examples/global-css is working. Also there is no need adding meta link.

[mixn]

@pi0 Yes, I have added

module.exports = {
  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type)
      }
    }
  }
}

to nuxt.config.js as well. When I drop

{ rel: 'preload', as: 'font', crossorigin: 'crossorigin', type: 'font/woff2', href: 'fonts/Interface-Regular.woff2' }

no fonts get preloaded via link rel="preload" in the head. :(

[mixn]

@pi0 @Atinux Any updates on this? ❤️

[rlam3]

what does this preload script do? I'm really confused....

[Atinux]

#1508

[TrueCarry]

Hello. I've tried shouldPreload option today and it actually works, but with little problem.
If you have non woff2 fonts, they're being preloaded too, but they should be ignored, since browsers with ability to preload fonts can use woff2.
I made simple check in shouldPreload, buy maybe it should be done by nuxt itself? Or you can add another type to just woff2 files.

shouldPreload: (file, type) => {
  if (type === 'font') return /.woff2/.test(file)
  return ['script', 'style'].includes(type)
}

[manniL]

See #1838 for further discussion and information.

[cmty[bot]]

This bug-report has been fixed by @manniL.

See #c1652 for further discussion and information.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.