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

时间:2017-10-29 03:00:14

标签: performance compilation postcss normalize-css postcss-import

就最终产品的性能/速度而言,根据最佳实践 - 应将Normalize.css保存为单独的文件(从HTML头链接)还是将其编译到最终的.css文件中更好? / p>

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

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行代码(和注释)。就可读性而言,它似乎不是我的最佳解决方案,但现在网站的加载速度会更快吗?

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

提前谢谢你。

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

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

相关问题