Normalize.css 应该作为单独的文件保存还是编译（通过 postcss @import）到最终的“styles.css”文件中？

Posted 2023-03-06

【中文标题】Normalize.css 应该作为单独的文件保存还是编译（通过 postcss @import）到最终的“styles.css”文件中？

【英文标题】：Should Normalize.css be kept as separate file or compiled (through postcss @import) into the final "styles.css" file?

【发布时间】：2018-04-10 07:44:07

【问题描述】：

就最终产品的性能/速度而言，根据最佳实践 - Normalize.css 应该作为单独的文件保存（从 html 头链接）还是将其编译到最终的 .css 文件中更好？

我在这里和许多其他网站上搜索，但找不到答案。希望你能理解我的困境：

1.将 normalize.css 留在 node-modules 文件夹中，并从我们的 html 链接到它。 我对编码仍然很陌生，但是如果我对这种方法的理解正确，除了我们的 main.css 文件之外，我们还会向服务器添加一个（可能是不必要的？）请求？它对网站的性能/加载时间有多大影响？

<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css"> <link rel="stylesheet" href="temp/styles/styles.css">

另一方面，我们可以：

2。使用 'postcss-import' 将 normalize.css 与其他模块一起导入，并将它们一起编译成一个最终的 .css 文件。

好的，现在我们把所有东西都放在了一个地方，但是我们刚刚在第一行我们实际的 css 之前添加了 451 行代码（和 cmets）。就可读性而言，它对我来说似乎不是最好的解决方案，但现在网站加载速度会快一点吗？

免责声明：到目前为止，我一直在使用第二种方法，但我开始问自己这是否是最佳解决方案。

提前谢谢你。

【参考方案1】：

理想情况下，将 normalize.css 添加到最终的 css 将在后处理步骤中完成，该步骤将所有源文件合并到一个文件中并缩小整个文件。这样你的源代码仍然是可读的，但你最终只加载了一个文件。

【讨论】：

这正是我现在正在做的事情。我在 ./app/assets/styles/modules/ 中保留单独的源文件（模块），而 postcss-import 正在处理将它们一起编译。当我在网站上工作时，一切都井井有条，但我更关心的是网站上线后的部分。也就是说，我不知道浏览器是否能更好地处理更多代码行或更多服务器请求。 :)

【参考方案2】：

您说的非常正确，如果网页在加载时向服务器发出的请求较少，则网页加载速度会更快。您也正确地指出组合文件的可读性低于单独加载的单个文件。

在您的情况下，哪个对您更重要是一个只有您可以回答的问题。这就是为什么你很难找到明确的建议。

我个人在开发中使用单独的文件选项，以便文件易于阅读和调试。加载速度在开发机器上并不重要。

在生产网站中，我使用组合文件选项。事实上，我使用 combine 和 minify 来减少加载的文件数量，并使这些文件的大小尽可能小。在这种情况下，可读性不太重要。

【讨论】：

谢谢菲利普 (@philip-smith)。我想通过这种方法（我正在使用并且幸运的是我很早就从非常好的教程中学到了这种方法），我们将拥有两全其美的优势。开发阶段良好的组织性和可读性，并在我们的网站上线后提高了性能。一个潜在的缺点是，如果有人将来需要编辑我们的代码并且他/她没有模块或源文件。这对他们来说会很乱。但是，这是一个巨大的“假设”，可能不太可能发生:)

我在 ASP.NET 中编写网站，这允许我在控制捆绑和缩小的 Web.config 文件中设置一个值。所以可以在任何机器上打开/关闭它，重新编译:)。