Предварительно загрузить таблицы стилей из node_modules в Angular

Question

Я установил Ionicons (npm install --save ionicons@4.6.3) в Angular 9 и импортировал их в свой файл styles.s css вот так:

$ionicons-font-path: "~ionicons/dist/fonts";
@import "~ionicons/dist/scss/ionicons.scss";

Все работает нормально , но, глядя на оценку Lighthouse, это сильно замедляет загрузку страницы. Когда я импортировал шрифт Google в свой файл index. html, я сделал следующее (предварительное подключение и предварительная загрузка, похоже, делают то же самое, оба работают):

<link rel="preconnect" as="font" href="https://fonts.googleapis.com/css?family=Work+Sans:400,600&display=swap"
    type="font/eot" crossorigin />

Как мне сделать то же самое с библиотекой, импортированной из node_modules? Заранее спасибо.

Answer 1

Я думаю, вы можете переместить путь импорта ionicons из style.s css в angular.json, как показано ниже:

"styles": [ "
...,
./node_modules/ionicons/dist/scss/ionicons.scss",
...,
],

Когда angular обслуживает или создает приложение, позаботьтесь об остальном и загрузите, оптимизировать и минимизировать для вас s css. Так что вам действительно не нужно rel=preload.

Надеюсь, я вам помогу.