怎么安装Critical-创新互联

本篇内容介绍了“怎么安装Critical”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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:{}

});

“怎么安装Critical”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！