关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

关键CSS和Webpack: 削减壅塞衬着的CSS的主动化解决筹划

"清除壅塞衬着的CSS和JavaScript"。这一条Google Page Speed Insights的建议总让我困惑。

当一个网页被拜访时，Google欲望它仅加载对初始视图有效的内容，并应用余暇时光来加载其他内容。这种方法可以应用户尽可能早地看到页面。

我们可以做很多工作来削减壅塞衬着的JavaScript，例如code splitting、tree shaking，缓存等。

我将扼要介绍一下这个项目标根本设备，如许我们在碰到解决筹划时，便利快速消化。

然则若何削减壅塞衬着的CSS?为此，可以拆分并优先加载初次衬着所须要的CSS(关键CSS)，然后再加载其它CSS。

可以经由过程编程的方法筛选出关键CSS，在本文中，我将向你展示若何经由过程Webpack的主动化流程来实现该筹划。

什么是浊宣衬着

如不雅资本是“壅塞衬着”的，则表示浏览器在资本下载或处理完成之前不会显示该页面。

平日，我们在html的head标签中添加CSS样式表，这种方法会壅塞衬着，如下所示：

<head> 
  <link rel="stylesheet" href=http://developer.51cto.com/art/201710/"/style.css"> 
  ... 
</head> 
<body> 
  <p>在style.css下载完之前，你看不到我！！！</p> 
</body>

当这个html页面被统??读器加载时，它将大年夜上到下被逐行解析。当浏览器解析到link标签时，它将急速开端下载CSS样式表，在完成之前不会衬着页面。

对于一个大年夜型网站，尤其是像应用了Bootstrap这种宏大年夜框架的网站，样式表有几百KB，用户必须耐烦等待其完全下载完才能看到页面。

那么，我们是否应当把link标签放到body中，以防止壅塞衬着?你可以这么做，然则壅塞衬着也不是全无长处，我们实际上可以应用它。如不雅页面衬着时没有加载任何CSS，我们会碰到丑恶的"内容闪现"。

手动区分关键CSS保护起来会异常苦楚。以编程方法来实现的话，我们可以应用Addy Osmani的Critical。这是一个Node.js模块，它将读入HTML文档，并辨认关键CSS。Critical能做的还不止这些，你很快就能领会到。

我们想要的完美解决方檀卷应当是：首屏相干的关键CSS应用壅塞衬着的方法加载，所有的非关键CSS在首屏衬着完成后加载。

关键CSS

这里是我用Webpack和Bootstrap编写的一个简单的网页, 下面的截图是初次衬着后的样式。

点击Sign Up today按钮会弹出一个模态框, 模态框弹出时的样式如下:

初次衬着须要的样式包含导航条的样式、超大年夜屏幕样式、按钮样式、其它构造和字体的公悠揭捉?式。然则我们并不须要模态框的样式，因为它不会急地点页面中显示。推敲到这些，下面是我们拆分关键CSS和非关键CSS的可能的方法：

critical.css

.nav { 
  ... 
} 
 
.jumbtron { 
  ... 
} 
 
.btn { 
  ... 
}

non_critical.css

.modal { 
  ... 
}

【编辑推荐】

CSS 黑魔法小技能，让你少写不须要的JS，代码更优雅
国内最火的 HTML、CSS、JavaScript 开源项目 Top 榜，你知若干？
你所不知道的CSS滤镜技能与细节
若何应用Flexbox和CSS Grid，实现高效构造
编写出色CSS代码的13个建议

【义务编辑：庞桂玉 TEL：（010）68476606】

如不雅你已经有这个概念，那么你可能会提出两个疑问：

1/4 1 2 3 4 下一页尾页

　　推荐阅读

　　杭州100余路口已实现信号灯无人调控，杭州城市大脑1.0正式发布

随后，城市大年夜脑1.0正式宣布，交出了用智能治理城市的周年答卷：接收杭州128个旌旗灯号灯路口，试点区域通行时光削减15.3%，高架门路出行时光节俭4.6分钟。在主城区，城市大年夜脑日发>>>详细阅读

本文标题：关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

地址：http://www.17bianji.com/lsqh/37817.html

1/2 1