Question

我目前正在研究一个使用“ Office UI Fabric React”（https://developer.microsoft.com/en-us/fabric#/get-started）的react / redux项目，而该项目又似乎依赖于“ Office UI Fabric Core”（https://developer.microsoft.com/en-us/fabric#/get-started#core）几种样式，图标等。

现在，通常情况下，将推荐的样式表引用添加到项目在其中运行的index.html文件中就可以很好地工作，但是每隔一段时间（应用加载时间为1-5％），与“核心”样式表无法加载，而是由外来字符代替，表明样式表没有完成其工作，即加载了图标字体（这是有道理的，因为每次发生时，“核心”样式表都不会显示在在Chrome的检查器的“网络”标签中显示的已加载CSS资源列表）。

这是到目前为止我通过故障排除尝试过的方法...

在React中更新我所有与结构相关的依赖项（无骰子）
由于我最初没有注意到提供用于下载本地副本的链接的精美图片，所以我尝试制作自己在CDN上找到的CSS本地副本，并在我的项目中引用它。这导致问题持续发生而不是消失，这似乎很奇怪，因为我希望除非字体家族引用是相对的，否则它会起作用，但是对CSS的快速扫描似乎使它们都指向了其他CDN url ，让我感到困惑，但至少对至少一直持续发生的事情感到高兴。
然后，我注意到从本地下载官方副本的链接（从https://github.com/OfficeDev/office-ui-fabric-core/releases），并尝试了... ...但这实际上使问题变得更糟，就像使用THAT引用（指向相同版本的）一样。我通过CDN加载的文件），图标始终不存在（没有图标或外来字符，只有空白）。这是为了查看@ https://codepen.io/anon/pen/NOEymG而复制的，而我在https://github.com/OfficeDev/office-ui-fabric-core/issues/1149上针对该问题打开了一个错误。

然后我认为扫描css时可能错过了一个相对的依赖关系，并且可能偶发图标中断的原因是这些样式仅在直接从CDN直接访问时才起作用＆不是当浏览器加载文件的缓存副本时，所以我将其组合在一起以强制每次从CDN加载样式...

<link rel="stylesheet" id="FabricCoreCss" />
<script type="text/javascript">
    (function(){var day = new Date(), version = day.getTime().toString(); document.getElementById("FabricCoreCss").setAttribute("href", "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.4.0/css/fabric.min.css?v=" + version);})();
</script>

...到目前为止，每次尝试都奏效了，但是我忍不住想要...

我仍然想念一些东西
有一个比强迫浏览器不要缓存通常应缓存的内容更好的解决方案（出于通常提供的性能优势）

该项目的yarn.lock文件的相关部分如下：

"@uifabric/icons@>=5.8.0 <6.0.0":
  version "5.8.0"
  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons- 
  5.8.0.tgz#fb7e4476a88e5b6ea1d121163f924bbc35a02b28"
  integrity //omitted//
  dependencies:
    "@uifabric/styling" ">=5.30.1 <6.0.0"
    tslib "^1.7.1"

"@uifabric/merge-styles@>=5.17.1 <6.0.0":
  version "5.17.1"
  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz#9325817069011efb5f425e0fd163a975d9a12a3c"
  integrity //omitted//
  dependencies:
    tslib "^1.7.1"

"@uifabric/styling@>=5.30.1 <6.0.0", "@uifabric/styling@>=5.36.0 <6.0.0":
  version "5.36.0"
  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-5.36.0.tgz#46d53b501703346ee85fea39d06705bb25db8d04"
  integrity //omitted//
  dependencies:
    "@microsoft/load-themed-styles" "^1.7.13"
    "@uifabric/merge-styles" ">=5.17.1 <6.0.0"
    "@uifabric/utilities" ">=5.34.1 <6.0.0"
    tslib "^1.7.1"

"@uifabric/utilities@>=5.34.1 <6.0.0", "@uifabric/utilities@>=5.34.2 <6.0.0":
  version "5.34.2"
  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-5.34.2.tgz#78eb1b42cebf361ce3de07f99c99c7c18ea2f555"
  integrity //omitted//
  dependencies:
    "@uifabric/merge-styles" ">=5.17.1 <6.0.0"
    prop-types "^15.5.10"
    tslib "^1.7.1"

...

office-ui-fabric-react@^5.75.0:
  version "5.128.1"
  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-5.128.1.tgz#d15442949f4837210bb173579e5dc3e78943f1f1"
  integrity //omitted//
  dependencies:
    "@microsoft/load-themed-styles" "^1.7.13"
    "@uifabric/icons" ">=5.8.0 <6.0.0"
    "@uifabric/merge-styles" ">=5.17.1 <6.0.0"
    "@uifabric/styling" ">=5.36.0 <6.0.0"
    "@uifabric/utilities" ">=5.34.2 <6.0.0"
    prop-types "^15.5.10"
    tslib "^1.7.1"

为什么没有从CDN持续加载Office UI Fabric Core CSS图标？

0 个答案: