allow splitting styles.css into multiple chunks and lazy load using defer keyword

[leon]

🚀 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.

[alan-agius4]

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;

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.

You can inject the CSS file directly in the HTML file without the need of any JavaScript

[clydin]

Also of note is that link elements do not support a defer attribute. This attribute is only available for script elements. There are workarounds involving inline onload scripts and manipulation of the media attribute but they can suffer from CSP related issues and certain variations may not have cross-browser support.

[angular-automatic-lock-bot]

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.}