是否在 Angular 6 中多次加载相同的引导 css 文件会降低性能答案

【问题标题】：Does loading same bootstrap css file multiple times in angular 6 slow downs performance是否在 Angular 6 中多次加载相同的引导 css 文件会降低性能
【发布时间】：2020-10-15 17:10:27
【问题描述】：

我在 src/index.html 内的应用程序中使用 angular 6 我发现引导程序正在加载

<link href="assets/css/bootstrap/css/bootstrap.css">

我的应用程序的每个 component.ts 也在各自的文件中使用 bootstrap 作为

 styleUrls:[
    **'../../../../assets/css/bootstrap/css/bootstrap.min.css',**
    '../../../../assets/css/font-awesome/css/font-awesome.min.css']

我认为在一个页面中有多个组件，例如（页眉、页脚、侧边栏、正文）。这意味着在一个页面加载中每个组件已经加载了四次 bootstrap css。

问题 1. 多次加载同一个 css 文件会导致页面加载缓慢吗？

为了减少页面负载，我可以从每个组件中删除所有引导 css 并将引导 css 导入 main style.css 为

@import 'assets/css/bootstrap/css/bootstrap.min.css';

在开发应用程序时会出现页面加载缓慢问题，即使我更改了单个字符，在页面刷新时也会出现页面加载时间比平时更长的问题。

建议如何进行。

【问题讨论】：

标签： angular typescript angular6

【解决方案1】：

是的，您可以将 Bootstrap 加载到主 CSS 文件中，然后删除 styleUrls。这些 styleUrl 主要用于对特定组件样式的模块化控制。在 Angular 中，您必须在 .json 文件中的 'styles' 部分下添加 CSS 文件，默认情况下会列出全局 'styles.css'。

【讨论】：