0

I'm using Stencil to create a native browser web component using shadow for view encapsulation.

If at the top of my SCSS file I use

@import url($url-icons);

Will that have each component redownload the font/icon files for each component instance, there-by having a negative effect on performance?

If so, what's the best practice to handle this sort of shared dependency?

David Alsh
  • 6,747
  • 6
  • 34
  • 60
  • 3
    Every browser has a cache for the downloaded files. It won't download the same file twice. – jeprubio May 29 '18 at 05:21
  • Possible duplicate of [How to apply common CSS styles to many Shadow Roots at once?](https://stackoverflow.com/questions/40973471/how-to-apply-common-css-styles-to-many-shadow-roots-at-once) – Supersharp May 29 '18 at 18:08

1 Answers1

0

The browser has a cache mechanism for those font files, so files "should" be downloaded only once (that's not the case when devtools are open with disable cache, which many developers use). But this is actually an implementation detail of the browser, and not of web components.

This means that importing the font itself inside a web component will cause multiple requests by the browser, and by that potentially have an extra cost - delegating the responsibility of fetching the font only once to the browser.

It's better to only include the font-family definition inside the web component css, and import the fonts (only) once in the app requiring the web components library or in the library init method (In Stencil you can add it to your defineCustomElements() call)

Ofer Segev
  • 5,094
  • 2
  • 22
  • 22