我正在使用Stencil创建一个使用阴影进行视图封装的本机浏览器Web组件。
如果在我的SCSS文件的顶部，我使用
@import url($url-icons);
是否会让每个组件重新下载每个组件实例的字体/图标文件，从而对性能产生负面影响？
如果是这样，处理这种共享依赖的最佳做法是什么？
答案 0 :(得分：0)
浏览器对这些字体文件有一个缓存机制，所以文件“应该”只下载一次（当 devtools 用 disable cache 打开时，情况并非如此，许多开发人员使用它）。但这实际上是浏览器的实现细节，而不是 Web 组件。
这意味着在 Web 组件中导入字体本身会引起浏览器的多次请求，这可能会产生额外的成本 - 将仅获取一次字体的责任委托给浏览器。
最好只在 web 组件 css 中包含 font-family 定义，并在需要 web 组件库的应用程序或库 init 方法中（在 Stencil您可以将其添加到您的 defineCustomElements() 调用中）