Почему CSS-иконки Office UI Fabric Core постоянно загружаются из CDN? - PullRequest
Новая
       43

Почему CSS-иконки Office UI Fabric Core постоянно загружаются из CDN?

0 голосов
/ 24 октября 2018

В настоящее время я работаю над проектом реагирования / избыточности, который использует «Office UI Fabric React» (https://developer.microsoft.com/en-us/fabric#/get-started),, который, в свою очередь, зависит от «Ядра Office UI Fabric Core» (https://developer.microsoft.com/en-us/fabric#/get-started#core) длянесколько стилей, значков и т. д.

Теперь обычно добавление рекомендуемой ссылки на таблицу стилей в файл index.html, внутри которого выполняется проект, работает идеально, но время от времени (1-5% времениприложение загружается), значки, связанные с «основной» таблицей стилей, не загружаются и вместо них заменяются сторонними символами, указывая на то, что таблица стилей не выполняет свою задачу по загрузке шрифтов значков (что имеет смысл, поскольку каждый раз, когда это происходит,основная таблица стилей не отображается в списке загруженных ресурсов CSS, которые появляются на вкладке «сеть» инспектора Chrome).

Вот то, что я пробовал до сих пор для устранения неполадок ...

  1. Обновление всех моих зависимостей, связанных с фабрикой, в React (без игры в кости)

  2. Поскольку изначально я не заметил штрафпечатая, предлагая ссылку для загрузки локальной копии, я попытался создать свою собственную локальную копию CSS, найденную в CDN, и сослаться на нее в своем проекте.Это приводило к тому, что проблема возникала последовательно, а не исчезала, что казалось странным, потому что я ожидал бы, что это сработает, если ссылки на семейство шрифтов не будут относительными, но быстрое сканирование css, похоже, показывает, что все они указывают на другие URL CDN, поэтому я был озадачен, но, по крайней мере, счастлив, что что-то постоянно происходило, по крайней мере.

  3. Затем я заметил ссылку для скачивания официальной копии для локального использования (с 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.

  4. Я тогда подумал, что, возможно, тамбыла относительная зависимость где-то, что я пропустил при сканировании 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"
...