2

I'm crating application in angular with SSR

How do I apply <link rel="preload" href="/styles.css" as="style" /> to head section or Link header in order to preload/prefetch whole styles.css file?

Using plain styles.css is not enoug as production build generate file that contains random characters like styles.7541caaaab536370.css (different in every build)

Googling about preloading and prefetching in angular only results in preloading components/modules and I'm out of ideas

ciekals11
  • 2,032
  • 1
  • 10
  • 24
  • It is `rel="preload"` https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload –  Jan 30 '23 at 18:55
  • @E.Maggini well, good point, yes, but it does not help with my question – ciekals11 Jan 30 '23 at 19:16
  • 2
    What are you hoping to achieve by preloading the CSS in that way? – pthor Jan 30 '23 at 19:29
  • If the file is dynamic how is it loaded now –  Jan 30 '23 at 19:57
  • @PaulThorsen, main point is to minimize TBT – ciekals11 Jan 30 '23 at 20:04
  • You won't be able to decrease your TBT by preloading the CSS. With SSR, the entire application is rendered on the server and then sent to the client. Bundled into this initial HTML is a bunch of inlined CSS. You can see this by viewing the page source of your application. You'll see a – pthor Jan 30 '23 at 20:16
  • @PaulThorsen There is an options in `angular.json` in build optimization that regulates if it should generate inline style called `inlineCritical`. This option is disabled in my project as there is a lot of css that should be critical but for some reason isn't and when `inlineCritical` is enabled then CLS goes through the roof. Preloading will help with TBT as it tells browser to load given file (styles.css in my example) before brwwser discovers it itself and stops rendering in order to fetch this file. – ciekals11 Jan 30 '23 at 20:29
  • 1
    I see - thanks for the info. Have you considered placing your styles.css in the assets folder? That way, the output file will not be "fingerprinted" and you'll have the ability to reference it directly from your index.html as it will simple be named styles.css post-build. – pthor Jan 30 '23 at 21:15
  • @PaulThorsen after some testing this will not work unfortunately. main css file is combined with css from other modules and still generates `styles..css` – ciekals11 Jan 31 '23 at 18:15
  • I'm able to achieve the desired result in testing it. What do you mean that it the main css file is combined with css from other modules? Your styles.css is pulling in other CSS? Or other angular components are pulling in the styles.css? – pthor Jan 31 '23 at 19:31

1 Answers1

2

You can include the styles.css file in the assets folder. This will prevent the angular build process from "fingerprinting" the file and the resulting build file will simply be named styles.css allowing you to reference it directly from your index.html.

pthor
  • 603
  • 5
  • 10