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