critters herunterladen - critters Quellcode Download

critters

Anderer Quellcode

3.0.2

Herunterladen

Vorsicht

Das Eigentum an Tiere ist in das Nuxt -Team übergegangen, das das Projekt in Zukunft beibehalten wird. Wenn Sie weiterhin Tiere verwenden möchten, wechseln Sie bitte zu der aktiv gemachten Gabel unter https://github.com/danielroe/beasties. Dieses Repo ist jetzt archiviert und erhält keine zukünftigen Updates.

Tiere

Critters ist ein Plugin, das dem kritischen CSS Ihrer App einbindet und den Rest faul lädt.

Tiere

Es unterscheidet sich ein wenig von anderen Optionen, da es keinen kopflosen Browser verwendet, um Inhalte zu rendern. Mit diesem Kompromiss können Tiere sehr schnell und leicht sind. Es bedeutet auch, dass Tiere alle von Ihrem Dokument verwendeten CSS-Regeln eingebunden und nur diejenigen, die für den oberflächigen Inhalt benötigt werden. Für Alternativen siehe ähnliche Bibliotheken.

Das Design von Critters macht es gut, wenn es kritische CSS für prerendered/ssr'd -Einzelseiten -Anwendungen inliniert. Es wurde ein hervorragendes Kompliment für die Prerender-Lader entwickelt und verbessert die erste Lackzeit für die meisten einzelnen Seitenanwendungen drastisch.

Merkmale

Schnell - kein Browser, wenige Abhängigkeiten
Integriert sich in Webpack Critters-Webpack-Plugin
Unterstützt das Vorladen und/oder die Einbeziehung kritischer Schriftarten
Pflaumen unbenutzte CSS -Keyframes und Medienfragen
Entfernt eingeführte CSS-Regeln aus faul beladenen Stylesheets

Installation

Installieren Sie zunächst Tiere als Entwicklungsabhängigkeit:

 npm i -d Tiere

oder

 Garn addieren -d Tiere

Einfaches Beispiel

 Tiere aus 'Tiere'; const Critters = neue Critters ({{{
  // Optionale Konfiguration (siehe unten)}); const html = `<style> .red {color: rot} .blue {color: blau} </style> <div class =" blau "> Ich bin blau </ div> `; const inlined = wartet Critters.Process (html); console.log (eingeleitet); //" <Styles> .Blue {color: blau} </style> <div class = "blau"> Ich bin blau </div> "

Verwendung mit Webpack

Critters ist auch als Webpack-Plugin namens Critters-Webpack-Plugin erhältlich.

Das Webpack -Plugin unterstützt dieselben Konfigurationsoptionen wie das Hauptpaket critters :

 // webpack.config.js+const Critters = Request ('Critters-Webpack-Plugin'); module.exports = {
  Plugins: [+ neue Tiere ({+ // Optionale Konfiguration+ Vorspannung: 'Swap',+ inclupteLectors: [/^.btn/, '.Banner'],+})
  ]
}

Das war's! Die resultierende HTML wird seine kritischen CSS eingebaut und die Stylesheets faul geladen.

Verwendung

Tiere

Alle optional. Geben Sie sie an new Critters({ ... }) .

Parameter

options

Eigenschaften

path String -Basispfadspeicherort der CSS -Dateien (Standard: '' )
publicPath String Public Path der CSS -Ressourcen. Dieses Präfix wird aus dem HREF entfernt (Standard: '' )
external boolesche Inline -Stile aus externen Stylesheets (Standard: true )
inlineThreshold -Nummer inline externe Stylesheets kleiner als eine gegebene Größe (Standard: 0 )
minimumExternalSize -Zahl Wenn das nicht kritische externe Stylesheet unter dieser Größe liegt, inzieren Sie es einfach (Standard: 0 )
pruneSource boolean entfernen Sie eingeführte Regeln aus dem externen Stylesheet (Standard: false )
mergeStylesheets boolean fusioniert eingefnagte Stylesheets in ein einzelnes <style> -Tag (Standard: true )
additionalStylesheets -Array <string> Glob für die Verwendung anderer Stylesheets, die bei der Suche nach kritischer CSS verwendet werden sollen.
Die Boolesche Option reduceInlineStyles gibt an, ob Inline -Stile für kritische CSS bewertet werden sollten. Standardmäßig werden Inline -Stil -Tags bewertet und neu geschrieben, um nur kritische CSS zu enthalten. Stellen Sie es auf false ein, um die Inline -Stile der Verarbeitung zu überspringen. (Standard: true )
preload , welche Strategie vorlädt werden soll
noscriptFallback boolean add <noscript> fallback zu JS-basierten Strategien
inlineFonts boolean Inline Critical Font-Face-Regeln (Standard: false )
preloadFonts boolesche Vorspannungen kritische Schriftarten (Standard: true )
fonts boolean Shorthand zum Einstellen inlineFonts + preloadFonts * Werte:

true inline kritische Schriftartenregeln und Vorladung der Schriftarten
false , keine Schriftregeln zu inzeilen und keine Schriftarten vorzuladen

keyframes -String steuert, welche Schlüsselfaktorregeln eingebaut sind.* Werte:

"critical" : (Standard) Inline -KeyFrames -Regeln, die von den kritischen CSS verwendet werden
"all" Inline alle Keyframes -Regeln
"none" Entfernen Sie alle Keyframes -Regeln

compress boolesche Kompress, die kritische CSS resultiert (Standard: true )
logLevel String steuert die Protokollebene des Plugins (Standard: "info" ).
logger Geben Sie einen benutzerdefinierten Protokoll -Schnittstellenprotokollger an
includeSelectors Regexp | String gibt eine Liste von Selektoren an, die in das kritische CSS enthalten sein sollten. Akzeptiert sowohl Regexp als auch String.

Regeln einschließen/ausschließen

Wir können Regeln einbeziehen oder ausschließen, um Teil des kritischen CSS zu sein, indem wir Kommentare in das CSS hinzufügen

Eins Zeilen -Kommentare, die die nächste CSS -Regel einschließen/ausschließen können

 / * Tiere: Ausschließen */. Selector1 {/ * Diese Regel wird von kritischen CSS */} ausgeschlossen

.Selector2 {/ * Dies wird normal bewertet */}/ * Tiere: Include */. Selector3 {/ * Diese Regel wird in das kritische CSS */} enthalten sein

.Selector4 { / * Dies wird normal bewertet * /}

Einschließlich/Ausschluss mehrerer Regeln durch Hinzufügen von Start- und Endmarkierungen

 / * Tiere: Start ausschließen */. selector1 {/ * Diese Regel wird von kritischen CSS */} ausgeschlossen

.Selector2 {/ * Diese Regel wird von kritischen CSS */}/ * Tribons ausgeschlossen: End */ausschließen

 / * Tiere: Start einschließen */. selector3 {/ * Diese Regel wird in das kritische CSS */} enthalten sein

.Selector4 {/ * Diese Regel wird in das kritische CSS */}/ * Tiere aufgenommen: Ende */integrieren

Critters Container

Standardmäßig bewertet Critters das CSS anhand des gesamten Eingangs -HTML. Tiere bewertet das kritische CSS, indem er das gesamte DOM rekonstruiert und die CSS -Selektoren bewertet, um passende Knoten zu finden. Normalerweise funktioniert dies gut als Tiere, ist leicht und schnell.

In einigen Fällen kann der Eingang HTML sehr groß oder tief verschachtelt sein, was den rekonstruierten DOM viel größer macht, was wiederum die kritische CSS -Erzeugung verlangsamen kann. Tiere sind sich der Ansichtsfenstergröße nicht bewusst und welche spezifischen Knoten über der Falte liegen, da kein kopfloser Browser beteiligt ist.

Um dieses Problem zu überwinden, verwenden Critters -Container .

Ein Critters-Container ahmt das Ansichtsfenster nach und kann durch Hinzufügen data-critters-container Container aktiviert werden.

Sie können den Inhalt Ihres Ansichtsfensatzes grob schätzen und einen data-critters-container um den Inhalt hinzufügen.

 <html>
  <body> <div class = "container"> <div-dat-kritter-container>/ * html in diesem Container werden verwendet, um kritische CSS */</div>/ * HTML zu bewerten div> <fouter> </footer>
  </body> </html>

HINWEIS: Dies ist eine einfache Möglichkeit, die Leistung von Tribütern zu verbessern

Logger

Benutzerdefinierte Logger -Schnittstelle:

Typ: Objekt

Eigenschaften

trace Function (String) druckt eine Trace -Nachricht aus
debug Function (String) druckt eine Debug -Nachricht aus
info -Funktion (Zeichenfolge) druckt eine Informationsnachricht aus
warn Function (String) druckt eine Warnmeldung aus
error (String) druckt eine Fehlermeldung aus

Loglevel

Steuert die Protokollpegel des Plugins. Gibt die Ebene an, die der Logger verwenden sollte. Ein Logger erzeugt keine Ausgabe für eine Protokollpegel unter der angegebenen Ebene. Verfügbare Levels und Reihenfolge sind:

"Info" (Standard)
"warnen"
"Fehler"
"verfolgen"
"debuggen"
"still"

Voroadstrategie

Der Mechanismus für faule Ladestilheets.

HINWEIS: JS gibt eine Strategie an, die JavaScript erfordert (fällt auf <noscript> zurück, sofern nicht deaktiviert).

Standard: Verschieben Sie Stylesheet -Links auf das Ende des Dokuments und fügen Sie vorlastende Meta -Tags an ihrer Stelle ein.
"Körper": Verschieben Sie alle externen Stylesheet -Links auf das Ende des Dokuments.
"Media": Laden Sie Stylesheets asynchron, indem Sie media="not x" hinzufügen und nach dem Laden entfernen. JS
"Swap": Stylesheet -Links zu Vorspannungen konvertieren, die nach geladenem (Details) auf rel="stylesheet" tauschen. JS
"Swap-High": Verwenden Sie <link rel="alternate stylesheet preload"> und Swap auf rel="stylesheet" nach dem Laden (Details). JS
"JS": Injizieren Sie einen asynchronen CSS -Loader ähnlich wie LOADCSS und verwenden Sie es, um Stylesheets zu laden. JS
"JS-Lazy": Wie "js" , aber das Stylesheet ist bis voll geladen.
Falsch: Deaktiviert das Hinzufügen von Vorspannungs -Tags.