Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to install Critical". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Critical is a tool to deal with the critical path problem of css. For best performance, programmers may need to consider inserting critical css directly into the html document, as this eliminates additional round trips for critical paths. The concrete practice of this idea is to find key css rules and place them in the section of the html document. Critical generates and inlines the critical path css, and programmers can use both Grunt and Gulp.

Installation of Critical

Copy

$npminstall--savecritical

Critical plug-ins build plug-ins

Grunt key

Swallowing users should use the key directly.

Demonstration project

Optimize a basic page using Optimize and use a tutorial

The Angular template is optimized by Gulp method.

Use Gulp to optimize the weather application.

Usage

These include:

Copy

Varcritical=require ('critical')

A complete example of Critical with available options:

Copy

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

})

That's all for "how to install Critical". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.