Nuxt.js: extractCss build option doesn't preload the extracted styles

[mfrascati]

Version

v2.11.0

Reproduction link

http://localhost

Steps to reproduce

Setting the option
build: { extractCSS: true }
in the rendered html we have

Since it's meant to be use as an alternative to cpu consuming js bundled scripts, I suppose the css should be preloaded, but the generated tag is missing the rel="preload" as="style" attributes.

This way we can only choose between high js parsing time and late loaded css, which are both a problem for seo!

Did I miss how to fix it or is an issue?

What is expected ?

What is actually happening?

[delrueba]

Alternative reproduction link

https://verwerkingsregisterqa.stad.gent/

Repository

https://github.com/StadGent/nuxt_site_verwerkingsregister

Config

``` /*
* Build configuration
*/
build: {
extractCSS: {
allChunks: true
},
postcss: {
plugins: {
'postcss-custom-properties': false
}
},
/
** Add sass loader
*/
extend (config) {
config.module.rules.push({
test: /.scss$/,
use: [
{
loader: 'sass-loader',
options: {
includePaths: [
'node_modules/breakpoint-sass/stylesheets',
'node_modules/gent_styleguide/build/styleguide'
]
}
}
]
})
}
},

[JohnMica]

strange thing indeed
if I use shouldPreload nothing happens
if i use shouldPrefetch all defined resources are prefetched (style, script, font)

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

i've tried also with no render prop (using nuxt default) but is has the same behaviour = no preload on any css / js chunks.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[Mohib834]

Hey, do we have the fix ? I am too stuck on the same thing.

[JohnMica]

Vuetify would need to update the way they play with the CSS in order to fix this, or you specify treeShaking- false and load the full CSS to the page (kind of a bloated solution) but nothing we can do about it yet.
It’s CSS-in-JS magic ...

[Mohib834]

@JohnMica, I don't think setting treeShaking to false is a good option as I am overriding a lot of vuetify variables. Guess we have to wait for its solution.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[nachogarcia]

Same thing is happening to me using bootstrap-vue and extractCss.

Some styles that I have in a component and have nothing to do with any library are being extracted and included in a link with no prefetch, alongside many others. So I'm not sure is bootstrap-vue's fault.

Disclaimer.vue:

...
<style lang="scss" scoped>
#cookie-disclaimer {
...

<link rel="stylesheet" href="/_nuxt/14bf0016ef0c11e18016.css"> :

#cookie-disclaimer[data-v-66268938]{background-color:#f7f7f7}@media (min-width:576px){#cookie-disclaimer .row[data-v-66268938]{margin:2rem}}#cookie-disclaimer .text[data-v-66268938]{font-size:13px;color:#3a3a3a}#cookie-disclaimer[data-v-66268938] .enableCookies .btn{border-color:#000;width:190px}@media (max-width:991.98px){#cookie-disclaimer[data-v-66268938] .btn.md{padding-right:0;margin-right:-20px}}@media (max-width:991.98px){#cookie-disclaimer .cta-container[data-v-66268938]{display:flex;justify-content:center}}.cookies-message[data-v-66268938] *{color:#3a3a3a}.cookies-message[data-v-66268938] a{text-decoration:underline}.cookies-message[data-v-66268938] p{margin-bottom:0}

[urbgimtam]

Any news on this matter? It's becoming slightly more important due to the web-vital metrics used by Google.
It appears as a recommended suggestion on the LightHouse report.

[simonhrogers]

@urbgimtam I’ve just run into exactly the same issue – would love a resolution for this!

[Sunhat]

+1

[JohnMica]

I believe there has been a fix done on Vuetify-loader that should fix this, not sure exactly in what release will appear and how will Nuxt work for this

There is an extra option to be added to the Vuetify config in nuxt ... once the patch is done, so ... we’ll have a fix soon :)

Regards,

John Mica

On 20 Aug 2020, at 11:37, Юрий [e-mail] wrote:


+1

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[zoxon]

Same problem, but I don't use vuetify or any CSS framework.
Nuxt v.2.14.4

[simplenotezy]

strange thing indeed
if I use shouldPreload nothing happens
if i use shouldPrefetch all defined resources are prefetched (style, script, font)

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

i've tried also with no render prop (using nuxt default) but is has the same behaviour = no preload on any css / js chunks.

@JohnMica does this work?