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

template: 'index.html',

inject: true

})

]

};

你还会留意到，非关键CSS应用了一个看起来更复杂的link标签来加载。rel="preload"通知浏览器开端获取非关键CSS以供之后用。其关键在于，preload不壅塞衬着，无论资本是否加载完成，浏览器都邑接着绘制页面。

正如你所看到的，我的应用法度榜样First Meaningful paint时光缩短了将近1秒，达到可交互状况的时光节俭了0.5秒。实际中，你的应用法度榜样可能无法获得如斯惊人的改良，因为我的CSS很粗笨(我包含了全部Bootstrap库)，并且在如许一个简单的应用法度榜样中，我没有很多关键CSS规矩。

link标签中的onload属性许可我们在非关键CSS加载完成时运行脚本。Critical模块可以主动将此脚本嵌入到文档中，这种方法供给了将非关键CSS加载到页面中的跨浏览器兼容办法。

<link href=http://developer.51cto.com/art/201710/"/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">

把Critical组件添加到webpack打包流程中

我创建了一个名为HTML Critical Webpack Plugin的插件，该插件仅仅是Critical模块的封装。它将在HTML Webpack Plugin输出文件后运行。

你可以在Webpack的项目中如许惹人：

const HtmlCriticalPlugin = require("html-critical-webpack-plugin"); 
 
module.export = { 
  ... 
  plugins: [ 
    new HtmlWebpackPlugin({ ... }), 
    new ExtractTextPlugin({ ... }), 
    new HtmlCriticalPlugin({ 
      base: path.join(path.resolve(__dirname), 'dist/'), 
      src: 'index.html', 
      dest: 'index.html', 
      inline: true, 
      minify: true, 
      extract: true, 
      width: 375, 
      height: 565, 
      penthouse: { 
        blockJSRequests: false, 
      } 
    }) 
  ]  
};

留意：你应当只在临盆版本中应用，因为它将使你的开辟情况的构建很慢

表示结不雅

如今已经抽离了关键CSS，并且把非关键CSS的加载放到余暇时光，这在机能方面会有如何的晋升呢?

我应用Chrome的Lighthouse扩大插件进行测试。请记住，我们测验测验优化的指标是“初次有效绘制”，也就是用户须要多久才能看到真正可浏览的页面。

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

4/4 首页上一页 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