How to install Critical
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!
