从 Angular 中的 node_modules 预加载样式表答案

【问题标题】：Preload stylesheets from node_modules in Angular从 Angular 中的 node_modules 预加载样式表
【发布时间】：2020-10-10 05:36:00
【问题描述】：

我在 Angular 9 中安装了 Ionicons (npm install --save ionicons@4.6.3) 并将它们导入到我的 styles.scss 文件中，如下所示：

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

一切正常，但看看灯塔分数，它会大大减慢页面加载速度。当我在 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 导入的库做同样的事情？提前谢谢你。

【问题讨论】：

【解决方案1】：

我认为您可以将 ionicons 导入路径从 style.scss 移动到 angular.json，如下所示：

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

当 Angular 服务或构建应用程序时，会为您处理其余部分并加载、优化和最小化 scss。所以你真的不需要rel=preload。

希望能帮到你。

【讨论】：