Загружает ли шрифт с помощью @import внутри веб-компонента с тенью перезагрузить файл?

Question

Я использую Stencil для создания собственного веб-компонента браузера, используя тень для инкапсуляции вида.

Если в верхней части моего файла SCSS я использую

@import url($url-icons);

Будет ли при этом каждый компонент повторно загружать файлы шрифтов / значков для каждого экземпляра компонента, что отрицательно скажется на производительности?

Если да, то как лучше всего справляться с такой общей зависимостью?

Answer 1

Браузер имеет механизм кэширования для этих файлов шрифтов, поэтому файлы «должны» загружаться только один раз (это не тот случай, когда инструменты разработки открыты с помощью , которым пользуются многие разработчики). Но на самом деле это деталь реализации браузера, а не веб-компонентов.

Это означает, что импорт самого шрифта внутри веб-компонента вызовет многократные запросы со стороны браузера и, следовательно, потенциально повлечет за собой дополнительные затраты — возложение ответственности за получение шрифта только один раз на браузер.

Лучше включать только определение внутри веб-компонента css и импортировать шрифты (только) один раз в приложение, требующее библиотеки веб-компонентов, или в методе инициализации библиотеки (в вы можете добавить его в свой вызов)