🚀 Feature request
Command (mark with an x)
Description
When having a larger amount of css in the styles.css it causes performance problems when loading the app.
In my case it's because I include font awesome, which in turn includes the blocking loading of the .woff2 file.
I know we can use the ìnject: false` asset config to handle this ourselves
"styles": [
{
"input": "src/vendor-fontawesome.scss",
"inject": false,
"bundleName": "font-awesome"
}
],
but this means that the file created will not be hashed which means I cannot use cache-control: immutable, and it also means the javascript needs to be loaded before I can inject the styles using js.
Describe the solution you'd like
A solution would be to introduce a defer: true value to the config.
"styles": [
'src/styles/main.scss',
{
"input": "src/styles/vendor-fontawesome.scss",
"defer": true
}
],
What this should do is chunk that scss file into it's own css file and add the defer keyword <link rel="stylesheet" href="..." defer />
https://web.dev/defer-non-critical-css/
This would mean faster startups, and non essential css could be lazy loaded.
Describe alternatives you've considered
using inject: false and added the <link href="..." defer /> using javascript
exclude font awesome from my css completely and loading it using a cdn, but then I loose the simplicity of npm and version control.
🚀 Feature request
Command (mark with an
x)Description
When having a larger amount of css in the styles.css it causes performance problems when loading the app.
In my case it's because I include font awesome, which in turn includes the blocking loading of the .woff2 file.
I know we can use the ìnject: false` asset config to handle this ourselves
but this means that the file created will not be hashed which means I cannot use
cache-control: immutable, and it also means the javascript needs to be loaded before I can inject the styles using js.Describe the solution you'd like
A solution would be to introduce a
defer: truevalue to the config.What this should do is chunk that scss file into it's own css file and add the defer keyword
<link rel="stylesheet" href="..." defer />https://web.dev/defer-non-critical-css/
This would mean faster startups, and non essential css could be lazy loaded.
Describe alternatives you've considered
using
inject: falseand added the<link href="..." defer />using javascriptexclude font awesome from my css completely and loading it using a cdn, but then I loose the simplicity of npm and version control.