Angular 2 - 一个大的css文件或每个组件一个文件

Question

在Angular 2中，我们有多种选择可以为我们的应用程序制作样式。我试图推断，使用一个任务运行器（例如Gulp）制作一个大的minified .css文件或者为每个组件使用Angular 2 styleUrls: ['myfile.css']是否更好。通过哪种方式，浏览器的性能会更好？假设我们有大约100个组件，因此我们必须在浏览器中加载100个css文件，或者在该部分中加载一个更大的缩小的css文件。

您怎么看？

Answer 1

我个人觉得做分隔文件就像魅力一样。

PROS：

1. 结构良好的代码
2. 分离的css文件
3. 加载时间

CONS：

1. 在进行细微更改时需要查看过多的CSS。
2. 使调试更加困难（如果是严重错误）
3. 将缓存许多文件。

对于巨大的一个文件。

PROS：

1. 一个文件。
2. 易于维护。

CONS：

1. 太复杂了。
2. 不知道哪个类或id属于哪个代码段（如果没有正确命名）
3. 巨大的代码，可能会让事情变得更糟。
4. 花费太多时间来加载。

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

Answer 2

我个人（对于我的工作项目）使用了一个大型的缩小文件，而不是许多较小的文件，我在应用程序的不同组件上尝试了两个，并发现一个缩小的中央文件为我做了窍门。< / p>

Answer 3

<强>步骤1

哟需要确定整个CSS文件的权重，经过缩小和G-zip Compressed ...如果只是几kbs你应该考虑将你的所有样式连接成一个单独的文件...记得你总是可以缓存该文件进入客户端的机器，因此每次用户加载页面时都不需要下载文件...

<强>第二步

如果值得...你应该为特定组件隔离CSS规则......你不会在任何其他组件中重用的规则。

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

如果您的组件需要太多的CSS规则...我会说超过50行，它将变得难以维护，因为您不会从IDE或任何自动缩进功能获得IntelliSense ...所以你可以考虑使用：s2 == s2并将这些属性放在自己的文件中，更易于维护，如果您使用CSS预处理器生成CSS文件......这将是一种更好的方法。

  

请注意，每次在SPA中首次加载此组件时，您的应用都会从您的服务器styleUrls: ['myfile.css']请求该CSS文件。

但是，如果您的组件只需要几行样式，则可能需要使用 HTTP-REQUEST内联...这会加载更快，因为它会阻止应用向服务器发出另一个HTTP请求来获取样式