【发布时间】：2020-01-18 05:50:00
【问题描述】：
我正在考虑两种加载我的 CSS 的选项，并想知道哪一种是最有效的？
使用少量的 css 文件并将它们导入到一个单独的 main styles.css 中，并在 head 部分中使用此文件。
使用包含适用于所有页面的代码的通用 css 文件，然后创建单独的特定于页面的 css 文件并将它们包含在需要它们的页面中。例如，联系人页面的 css 只会在联系人页面上使用，因此无需在其他页面中加载这些 css。
那么你会走哪条路？ 谢谢
【问题讨论】：
-
(1) 几乎从来都不是最有效的选择，因为它会阻止浏览器知道要请求哪些额外的 CSS，直到它已经请求了额外的资源（带有导入的样式表）。你可以通过预加载或嵌入来解决这个问题，但我认为比较好的选择是将
@imports 等同于<link>s。 -
相关，但已经3岁了：stackoverflow.com/questions/40928956/…
-
相关：stackoverflow.com/a/49397312/707111（仅限 DD. 的回答）
-
数字 2 的一些变化。您应该尝试将“首屏”资产放入 14KB。还建议实施一个服务工作者，以便您可以控制缓存和离线用户体验。如果您想使用更多文件并将它们组合用于项目管理（编号 1），您需要实现将它们编译为静态资产的构建过程，在这种情况下，请查看 SASS 或 postCSS。
标签： css