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

我们若何用法度榜样区分关键CSS和非关键CSS?
若何让页面在初次衬着之前加载关键CSS，之后加载非关键CSS?

示例项目

起首, 在人口文件中惹人Bootsrap SASS。

main.js

require("bootstrap-sass/assets/stylesheets/_bootstrap.scss");

我应用sass-loader来处理sass，与Extract Text Plugin一路应用，将编译出来的css放到零丁的文件中。

应用HTML Webpack Plugin来创建一个HTML文件，它惹人编译后的CSS。这在我们的解决筹划中是必须的，你立时就会看到。

运行构建之后，这里是HTML文件的样子。请留意，CSS文件在head标签里惹人，是以将会壅塞衬着。

webpack.config.js

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
    <title>vuestrap-code-split</title> 
    <link href=http://developer.51cto.com/art/201710/"/style.css" rel="stylesheet"> 
</head> 
<body> 
  <!--App content goes here, omitted for brevity.--> 
  <script type="text/javascript" src=http://developer.51cto.com/art/201710/"/build_main.js"></script> 
</body> 
</html>

编程辨认关键CSS

Critical辨认关键CSS的方法如下：指定屏幕尺寸并应用PhantomJS加载页面，提取在衬着页面顶用到的所有CSS规矩。

以下为对项目标设置:

const critical = require("critical"); 
 
critical.generate({ 
   
  /* Webpack打包输出的路径 */ 
  base: path.join(path.resolve(__dirname), 'dist/'), 
  src: 'index.html', 
  dest: 'index.html', 
  inline: true, 
  extract: true, 
 
  /* iPhone6的尺寸，你可以按须要修改 */ 
  width: 375, 
  height: 565, 
   
  /* 确保调用打包后的JS文件 */ 
  penthouse: { 
    blockJSRequests: false, 
  } 
});

不应用区分关键CSS技巧的表示

履行时，会将Webpack打包输出文件中HTML更新为:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport"	
			 2/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