Critical是处理上css关键路径问题的一个工具。为了获得最佳性能，程序员可能需要考虑将关键css直接插入到html文档中，因为这消除了关键路径的额外往返行程。该想法的具体实践是查找关键的css规则，并将这些规则放在html文档的部分。Critical生成并内联关键路径css，程序员可同时使用Grunt和Gulp。

　　Critical的安装

　　复制

　　$npminstall--savecritical

　　Critical插件构建插件

　　grunt关键

　　吞咽用户应直接使用关键

　　演示项目

　　使用Optimize优化一个基本页面，并使用一个教程

　　用Gulp法优化Angular样板。

　　使用Gulp优化天气应用程序。

　　用法

　　包括：

　　复制

　　varcritical=require('critical');

　　Critical带有可用选项的完整示例：

　　复制

　　critical.generate({

　　//Inlinethegeneratedcritical-pathCSS//-truegeneratesHTML//-falsegeneratesCSSinline:true,

　　//Yourbasedirectorybase:'dist/',

　　//HTMLsourcehtml:'...',

　　//HTMLsourcefilesrc:'index.html',

　　//YourCSSFiles(optional)css:['dist/styles/main.css'],

　　//Viewportwidthwidth:1300,

　　//Viewportheightheight:900,

　　//TargetforfinalHTMLoutput.//usesomeCSSfilewhentheinlineoptionisnotsetdest:'index-critical.html',

　　//Minifycritical-pathCSSwheninliningminify:true,

　　//Extractinlinedstylesfromreferencedstylesheetsextract:true,

　　//CompleteTimeoutforOperationtimeout:30000,

　　//PrefixforassetdirectorypathPrefix:'/MySubfolderDocrot',

　　//ignoreCSSrulesignore:['font-face',/some-regexp/],

　　//overwritedefaultoptionsignoreOptions:{}

　　});