【发布时间】：2019-05-28 18:10:34
【问题描述】：
优化网站不实施基于渲染的优化。 解决方案需要使用 gulp，以便我们可以在测试和部署期间执行任务。
是否有用于 gulp 的开源库，允许我们根据媒体查询将单个 CSS 文件拆分为多个 CSS 文件？或者，是否有一个库可以在输出不同的 CSS 文件而不是单个文件时从 SASS 执行这种拆分？
以下是需要拆分的源 CSS 文件的示例版本。
body {
background: #f6f6f6;
}
@media(min-width: 780px){
.whatever{
max-width:100%
}
}
@media(min-width: 576px){
.col-sm{
flex-basis:0;
flex-grow:1;
max-width:100%
}
}
@media(min-width: 768px){
.col-md{
flex-basis:0;
flex-grow:1;
max-width:100%
}
.col-md-auto{
flex:0 0 auto;
width:auto;
max-width:100%
}
}
.footer {
background: blue;
}
期望的结果是生成 3 个文件，如下所示：
css-critical.css
body {
background: #f6f6f6;
}
.footer {
background: blue;
}
css-min-576.css
@media(min-width: 576px){
.col-sm{
flex-basis:0;
flex-grow:1;
max-width:100%
}
}
css-min-780.css
@media(min-width: 780px){
.whatever{
max-width:100%
}
.col-md{
flex-basis:0;
flex-grow:1;
max-width:100%
}
.col-md-auto{
flex:0 0 auto;
width:auto;
max-width:100%
}
}
这将允许像这样在 HTML 中加载 CSS 文件：
<link rel="stylesheet" href="/css-critical.css" />
<link rel="stylesheet" href="/css-min-576.css" media="(min-width: 576px)" />
<link rel="stylesheet" href="/css-min-780.css" media="(min-width: 780px)" />
重要提示：我们不太注意“css-critical.css”不一定是使用此技术的给定页面的最低临界 CSS。
【问题讨论】：
-
不是您要寻找的答案，但要记住的是，您获得的捆绑大小的优化可能会因添加更多网络请求而完全丢失。它甚至可能最终成为一个净负值。
-
首先你不需要 Gulp，还有很多其他的基本上做同样的事情，比如 rollup、webpack 和 parcel。与 Gulp 相比，这些可能更好、更先进、更能胜任任务。其次，正如其他人提到的那样，拆分 CSS 最终可能比将它们捆绑在一起更糟糕
-
这个想法是有 4 个文件，一个关键文件，加上一个移动设备、一个平板电脑和一个台式机。 Service Worker 托管缓存和 CDN 缓存等可以帮助消除多个请求的负面影响。
-
我们希望使用 gulp，因为我们不想为每个页面动态处理 CSS 样式。感谢您提及这些负面后果。主 CSS 文件是通过 gulp 从 SASS 生成的。
-
使用 webpack 你可以拥有多个入口文件。这与 sass 中的 if 语句一起，您可以制作所需的 4 个文件