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

content="width=device-width,initial-scale=1">

<title>Bootstrap Critical</title>

/* 关键CSS经由过程内部样式表方法惹人 */

body {

font-family: Helvetica Neue,Helvetica,Arial,sans-serif;

font-size: 14px;

line-height: 1.42857;

color: #333;

background-color: #fff;

}

...

</style>

</noscript>

/*用来加载非关键CSS的脚本*/

</script>

</head>

<body>

</body>

</html>

它还将输出一个新的CSS文件，例如style.96106fab.css(文件主动Hash定名)。这个CSS文件与原始样式表雷同，只是不包含关键CSS。

内联嵌入关键CSS样式

你会留意到，关键CSS已经嵌入到文档的头晨。这是最佳的，因为页面不必大年夜办事器加载它。

预加载非关键CSS

module.exports = { 
  module: { 
    rules: [ 
      { 
        test: /\.scss$/, 
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader', 
          use: ['css-loader', 'sass-loader'] 
        }) 
      }, 
      ... 
    ] 
  }, 
  ... 
  plugins: [ 
    new ExtractTextPlugin({ filename: 'style.css' }), 
    new HtmlWebpackPlugin({ 
      filename: 'index.html'	
			 3/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