Clever Geek Handbook

Can Angular embed global styles in <head> hitting performance?

When following the Angular-cli documentation, all styles included as global styles are eventually injected into the <head>

document when the DOM is created. Given that often global styles can be many lines of code, I am trying to figure out if injection is suitable for large web applications with system design.

I can see the benefits of having styles in <head>

on first boot. But what happens with subsequent loads? The browser does not cache inline styles or styles <head>

, which makes external CSS files preferable: load once, load from cache from now on. Angular's approach causes styles to be loaded (from JS efficiently) on every new page load.

Or am I missing something? Perhaps because the styles are <head>

rendered from JS, and since Angular files are loaded and cached themselves, are the styles actually cached as well?

+3


source share


1 answer


Almost everything you said is correct, so angular-cli

has the ability to extract css to css files instead of js

--extract-css (Boolean) Extract css from global styles onto css files instead of js ones.
  aliases: -ec, --extractCss


So, you can use it like this:

ng build -ec
+2


source






More articles:


All Articles