CODEWITHSUNDEEP
vue.jsnuxt.js
Nikita Umnov
Nikita Umnov

Reputation: 146

Nuxt.js - fonts preload in production

Everything is fine during development - preload has fonts, images, scripts. But when I build production, the fonts do not fall into preload. There is everything except fonts.

render: {
    http2: {
        push: true,
        pushAssets: (req, res, publicPath, preloadFiles) => console.log(preloadFiles)
    }
}

Output in dev (nuxt)

[         
  {
    file: 'runtime.js',
    extension: 'js',
    fileWithoutQuery: 'runtime.js',
    asType: 'script'
  },
  {
    file: 'vendors.app.js',
    extension: 'js',
    fileWithoutQuery: 'vendors.app.js',
    asType: 'script'
  },
  {
    file: 'app.js',
    extension: 'js',
    fileWithoutQuery: 'app.js',
    asType: 'script'
  },
  {
    file: 'assets/fonts/Play.woff',
    extension: 'woff',
    fileWithoutQuery: 'assets/fonts/Play.woff',
    asType: 'font'
  },
  {
    file: 'assets/fonts/Play.woff2',
    extension: 'woff2',
    fileWithoutQuery: 'assets/fonts/Play.woff2',
    asType: 'font'
  },
  {
    file: 'pages/index.js',
    extension: 'js',
    fileWithoutQuery: 'pages/index.js',
    asType: 'script'
  },
  {
    file: 'assets/images/logo.svg',
    extension: 'svg',
    fileWithoutQuery: 'assets/images/logo.svg',
    asType: 'image'
  },
]

Output in production (nuxt build; nuxt start):

[   
  {
    file: '5e0bcb963558b2151b59.js',
    extension: 'js',
    fileWithoutQuery: '5e0bcb963558b2151b59.js',
    asType: 'script'
  },
  {
    file: 'a8df7e6ca1b41b6ba1f3.js',
    extension: 'js',
    fileWithoutQuery: 'a8df7e6ca1b41b6ba1f3.js',
    asType: 'script'
  },
  {
    file: 'da6509a7baaff1386039.js',
    extension: 'js',
    fileWithoutQuery: 'da6509a7baaff1386039.js',
    asType: 'script'
  },
  {
    file: '834b4e9b65d7391ff800.js',
    extension: 'js',
    fileWithoutQuery: '834b4e9b65d7391ff800.js',
    asType: 'script'
  },
  {
    file: 'img/0b5b752.svg',
    extension: 'svg',
    fileWithoutQuery: 'img/0b5b752.svg',
    asType: 'image'
  },
]

I can't figure it out. Maybe someone faced such problem? How to decide?

I had to write this text because I couldn't publish so much code, and I don't know what else to say. Sorry for such cheating

UPD: Repo with minimal reproduction https://github.com/NomNes/nuxtjs-fonts-preload-bug.git

Upvotes: 5

Views: 14619

Answers (4)

M. Emre Yalçın
M. Emre Yalçın

Reputation: 654

i got the same issue too. instead of preloading fonts, i used inside of default.vue style scope, now it works.

<style lang="scss">
@import url(~/assets/font);
.
.
.
</style>

Upvotes: 0

Arian Fm
Arian Fm

Reputation: 387

hey i had the same problem and of course it was one of the gtmetrix warnings , so after many searches i found out i can put my code in layouts/default.vue ( the name of directory can be different in some projects but this is file that u can define your header and footer components like this:

<SiteHeader />

<nuxt /> ( your content )

<SiteFooter />

any way in the template of this default.vue u can simply add your code like other sites:

<template>
<div>
<link rel="preload" as="style" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossorigin="anonymous" onload="this.rel='stylesheet'"/>
</dive>
</template>

hope this be helpful

Upvotes: 1

Angel Roma
Angel Roma

Reputation: 417

Understanding how webpack works

When you run nuxt start or nuxt start for example, webpack will take all of your files including images, scss, css, js, woff2, etc, and wrap each of them into a module and then pass them into the Webpack bootstrap as an array of Modules.

So this is what happens with your fonts at the end of your bundle process:

{t.exports=n.p+"fonts/860685f.woff2"}

You can find this line in your <link rel="preload" href="/_nuxt/e54b54068d4c2a981747.js" as="script"> after nuxt start

Check your styles out

<style data-vue-ssr-id="17cfdfa9:0 aab9a468:0">
.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}
.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}
 @font-face{font-family:Play;src:url(/_nuxt/fonts/860685f.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
</style>

Why is not showing up in console.log()?

Your fonts are being pushed into your bundle files for production only and on runtime nuxt dev they are being handled in a different way.

http://localhost:3000/_nuxt/app.js

/***/ "./assets/Play.woff2":
/*!***************************!*\
  !*** ./assets/Play.woff2 ***!
  \***************************/
/*! no static exports found */

Please contact me if it is not the answer your were looking for or you need more information, I've made the effort to answer this interesting question. I'm currently at my lunch time and I don't have much time. :)

References

https://webpack.js.org/guides/asset-management/#loading-fonts

https://nuxtjs.org/api/configuration-render#resourcehints

Upvotes: 0

Aldarund
Aldarund

Reputation: 17621

Thats a bug in vue/nuxt . Fonts not included into preloadFiles if they are in global css.

here is a PR that will fix it -> https://github.com/nuxt/nuxt.js/pull/5436

Here PR in vue -> https://github.com/vuejs/vue/pull/9802

Upvotes: 8

Related Questions