Repository navigation
allow splitting styles.css into multiple chunks and lazy load using defer keyword #19445
Description
🚀 Feature request
Command (mark with an x)
- new
- build
- serve
- test
- e2e
- generate
- add
- update
- lint
- extract-i18n
- run
- config
- help
- version
- doc
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.
Activity
alan-agius4 commentedon Nov 20, 2020
Hi @leon,
We are currently working on extracting and inlining critical css which would result in also defering non critical css, see #18730 and #17966 for more information.
With regards to your statement;
You can inject the CSS file directly in the HTML file without the need of any JavaScript
clydin commentedon Nov 20, 2020
Also of note is that link elements do not support a
deferattribute. This attribute is only available for script elements. There are workarounds involving inlineonloadscripts and manipulation of themediaattribute but they can suffer from CSP related issues and certain variations may not have cross-browser support.feat(@angular-devkit/build-angular): enable inlining of critical CSS …
angular-automatic-lock-bot commentedon Jan 4, 2021
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.