角度2-一个大css文件或每个组件一个文件

在Angular 2中，我们有多种选择来为应用程序制作样式。我试图推断，使用一些任务运行程序（例如Gulp）或者为每个组件使用Angular 2

styleUrls:['myfile.css']

来创建一个大的

minified.css

文件是否更好。通过哪种方式，浏览器中的性能会更好？假设我们有大约100个组件，所以我们必须将100个css文件加载到浏览器中，或者在本节中加载一个更大、缩小的css文件

---

你觉得怎么样？

我个人（在我的工作项目中）使用了一个大的缩小文件，而不是很多小文件，我在应用程序的不同组件上尝试了这两种方法，发现其中一个缩小了，中央文件为我做到了这一点。

我个人认为，执行分离文件将非常有效

优点：

结构良好的代码

分离的css文件

加载几乎不需要时间

缺点：

在进行小的更改时，需要查看太多的CSS

使调试更加困难（如果存在严重错误）

许多文件将被缓存

一个大文件

优点：

一个文件给所有人

易于维护

缺点：

太复杂了

不知道哪个类或id属于哪个代码段（如果命名不正确）

庞大的代码，可能只会让事情变得更糟

加载花费的时间太多

每个人都有自己的观点。您想阅读本文。

步骤1

你需要确定多少整个CSS文件的重量，缩小和G-zip压缩后。。。如果只是几个KBS，你应该考虑把你所有的样式连接成一个文件…请记住，您始终可以将该文件缓存到客户端的计算机中，这样就不需要在用户每次加载页面时下载该文件

步骤2

如果值得的话。。。您应该隔离特定组件的CSS规则。。。您不打算在任何其他组件中重用的规则

完成此操作后，您将有两个选项：

如果组件需要太多CSS规则。。。我会说超过50行，这将变得很难维护，因为您无法从IDE或任何自动缩进功能获得IntelliSense。。。因此，您可以考虑使用：<代码> SytURURLS：[ MyField.CSS ] ，并在其自己的文件中拥有这些属性，更易于维护，并且如果您使用CSS预处理器来生成CSS文件…这将是一个更好的方法

请注意，每次您在SPA中首次加载此组件时，您的应用程序都会从服务器

HTTP-Request

请求该CSS文件

---

但是，如果您的组件仅需要几行样式，则可能需要使用

---

style:['h1{color:red}']

inline。。。这将加快加载速度，因为它会阻止应用程序向您的服务器发出另一个HTTP请求，以获取样式

分离的文件如何，只是为了简化项目结构，并将它们压缩为一个小型文件，然后在页面上加载这个文件？@Marox问题是，每次加载一个文件时，你的应用程序都会生成和

XHR

component@Smit答案中的文章链接是brokenSo one，加载到浏览器的缩小css似乎工作得更快？在我的情况下，是的，我非常小心，但是，就像你的一个答案中提到的，如果你不关注课程、ID等，事情可能会变得复杂。这真的很奇怪，因为我期望它会更慢，但结果会更快，当然，也会更简单，引用更少等等。