critters

Prudence

La propriété des créatures a déménagé dans l'équipe Nuxxt, qui maintiendra le projet à l'avenir. Si vous souhaitez continuer à utiliser des créatures, veuillez passer à la fourche active-maintenue à https://github.com/danielroe/beasties. Ce dépôt est désormais archivé et ne recevra pas de futures mises à jour.

Bestioles

Critters est un plugin qui incline le CSS et les charges paresseux critiques de votre application le reste.

bestioles

C'est un peu différent des autres options, car il n'utilise pas de navigateur sans tête pour rendre le contenu. Ce compromis permet aux bestioles d'être très rapides et légers . Cela signifie également que les bestioles inclinent toutes les règles CSS utilisées par votre document, plutôt que celles nécessaires pour le contenu ci-dessus. Pour des alternatives, voir des bibliothèques similaires.

La conception de Criters en fait un bon choix lors de l'inlinaison des CSS critiques pour les applications à page unique préenduées / SSR. Il a été développé pour être un excellent compliment à Prerender-chargedeur, se combinant pour améliorer considérablement le premier temps de peinture pour la plupart des applications de page.

Caractéristiques

• Rapide - pas de navigateur, peu de dépendances

• S'intègre aux créatures WebPack-Webpack-Plugin

• Prend en charge le préchargement et / ou l'inclinaison des polices critiques

• Prunes CSS inutilisées CSS et requêtes multimédias

• Supprime les règles CSS incorporées des feuilles de style chargées de paresseux

Installation

Tout d'abord, installez des bestioles comme dépendance au développement:

 Critres NPM I -D

ou

 Yarn Add -D Critters

Exemple simple

 Importer des bestioles de «créatures»; constateurs constants = nouvelles bestioles ({{
  // Configuration facultative (voir ci-dessous)}); const html = `<style> .red {colore: red} .Blue {Color: Blue} </ style> <div class =" bleu "> Je suis bleu </ div> `; const inlined = wait cretters.process (html); console.log (incliné); //" <style> .Blue {Color: Blue} </ style> <div class = "blue"> je suis bleu </div> "

Utilisation avec webpack

Critters est également disponible en tant que plugin WebPack appelé Critters-Webpack-Plugin.

Le plugin WebPack prend en charge les mêmes options de configuration que le package principal critters :

 // webpack.config.js + constaters constants = require ('Critters-webpack-Plugin'); module.exports = {
  Plugins: [+ Nouvelles bestioles ({+ // Configuration facultative + Précharge: 'Swap', + InclutSelectors: [/^.btn/, '.banner'], +})
  ]]
}

C'est ça! Le HTML résultant aura son CSS critique incorporé et les styles de style paresseux.

Usage

Bestioles

Tous facultatifs. Les transmettre à new Critters({ ... }) .

Paramètres

• options

Propriétés

• path String Base Base Oath Emplacement des fichiers CSS (par défaut: '' )

• publicPath String Public Path des ressources CSS. Ce préfixe est supprimé du HREF (par défaut: '' )

• Styles en ligne booléens external à partir de feuilles de styles externes (par défaut: true )

• Numéro inlineThreshold en ligne de styles externes inférieurs à une taille donnée (par défaut: 0 )

• Numéro minimumExternalSize Si la feuille de style externe non critique serait inférieure à cette taille, il suffit de l'installer (par défaut: 0 )

• pruneSource Boolean supprime les règles inclinées de la feuille de style externe (par défaut: false )

• mergeStylesheets Boolean a fusionné des feuilles de style inclinées dans une seule balise <style> (par défaut: true )

• additionalStylesheets Array <string> glob pour faire correspondre les autres styles de styles à utiliser tout en recherchant des CS critiques.

• Réduisez l'option booléenne reduceInlineStyles indique si les styles en ligne doivent être évalués pour le CSS critique. Par défaut, les balises de style en ligne seront évaluées et réécrites pour ne contenir que des CS critiques. Réglez-le sur false pour sauter les styles de traitement de traitement. (par défaut: true )

• preload String qui précharge la stratégie à utiliser

• noscriptFallback booléen ajouter <noscript> se calmer aux stratégies basées sur JS

• inlineFonts booléen Règles de police critiques en ligne (par défaut: false )

• preloadFonts Boolean Precharads Polices critiques (par défaut: true )

• fonts Boolean Ferme pour définir inlineFonts + preloadFonts * Valeurs:

• true aux règles critiques de la police critique et précharge les polices

• false pour ne pas informer les règles de police et ne pas précharger les polices

• Contrôles de chaîne keyframes quelles règles de clés de clés sont incorporées. * Valeurs:

• "critical" : (par défaut) Règles des images clés en ligne utilisées par le CSS critique

• "all" en ligne toutes les règles des images clés

• "none" supprime toutes les règles des images clés

• compress booléen compress CSS résultant (par défaut: true )

• logLevel String contrôle le niveau de journal du plugin (par défaut: "info" )

• logger Object Fournir un journaliste d'interface connectée

• includeSelectors électeurs regexp | La chaîne fournit une liste de sélecteurs qui doivent être inclus dans le CSS critique. Accepte à la fois regexp et chaîne.

Inclure / exclure les règles

Nous pouvons inclure ou exclure les règles pour faire partie du CSS critique en ajoutant des commentaires dans le CSS

Commentaires à ligne unique pour inclure / exclure la règle CSS suivante

 / * Critters: exclure * /. Selector1 {/ * Cette règle sera exclue de CSS critique * /}

.Selector2 {/ * Ceci sera évalué normalement * /} / * Critters: inclure * /. Selector3 {/ * Cette règle sera incluse dans le CSS critique * /}

.Selector4 {/ * Ceci sera évalué normalement * /}

Y compris / excluant plusieurs règles en ajoutant des marqueurs de début et de fin

 / * Critters: Excluez le démarrage * /. Selector1 {/ * Cette règle sera exclue de CSS critique * /}

.Selector2 {/ * Cette règle sera exclue de CSS CSS * /} / * Critters: Excluer la fin * /

 / * Critters: Inclure Start * /. Selector3 {/ * Cette règle sera incluse dans le CSS critique * /}

.Selector4 {/ * Cette règle sera incluse dans le CSS critique * /} / * Critters: Inclure la fin * /

Conteneur de créatures

Par défaut, les bestioles évaluent le CSS par rapport à l'ensemble de l'entrée HTML. Les créatures évaluent le CSS critique en reconstruisant l'ensemble du DOM et en évaluant les sélecteurs CSS pour trouver des nœuds correspondants. Habituellement, cela fonctionne bien car les bestioles sont légères et rapides.

Dans certains cas, le HTML d'entrée peut être très grand ou profondément imbriqué, ce qui rend le Dom reconstruit beaucoup plus grand, ce qui peut à son tour ralentir la génération CSS critique. Les créatures ne sont pas au courant de la taille de la fenêtre et quels nœuds spécifiques sont au-dessus du pli car il n'y a pas de navigateur sans tête impliqué.

Pour surmonter ce problème, les créatures utilisent des conteneurs de créatures .

Un conteneur de créatures imite la fenêtre et peut être activé en ajoutant data-critters-container dans le conteneur de niveau supérieur qui contient les éléments HTML au-dessus du pli.

Vous pouvez estimer grossièrement le contenu de votre fenêtre et ajouter un <div data-critters-container > autour du contenu.

 <html>
  <body> <div class = "Container"> <div Data-Criters-Container> / * html à l'intérieur de ce conteneur est utilisé pour évaluer CSS critique * / </div> / * html est ignoré lors de l'évaluation de CSS critique * / </ div> <fateter> </footer>
  </ body> </html>

Remarque: c'est un moyen facile d'améliorer les performances des bestioles

Bûcheron

Interface de connexion personnalisée:

Type: objet

Propriétés

• La fonction trace (String) imprime un message de trace

• La fonction debug (String) imprime un message de débogage

• La fonction info (String) imprime un message d'information

• warn la fonction (String) imprime un message d'avertissement

• La fonction error (String) imprime un message d'erreur

Logevel

Contrôle le niveau du journal du plugin. Spécifie le niveau que le bûcheron doit utiliser. Un enregistreur ne produira pas de sortie pour aucun niveau de journal sous le niveau spécifié. Les niveaux et la commande disponibles sont:

• "info" (par défaut)

• "avertir"

• "erreur"

• "tracer"

• "déboguer"

• "silencieux"

Type: ( "info" | "warn" | "error" | "trace" | "debug" | "silent" )

Préloadstrategy

Le mécanisme à utiliser pour les feuilles de styles de chargement paresseux.

Remarque: JS indique une stratégie nécessitant JavaScript (retombe à <noscript> sauf si désactivé).

• Par défaut: Déplacez les liens de feuille de style à la fin du document et insérez des balises de méta de précharge à leur place.

• "Body": déplacez tous les liens de feuille de style externe vers la fin du document.

• "Media": Chargez des styles de styles de manière asynchrone en ajoutant media="not x" et en supprimant une fois chargé. Js

• "Swap": Convertir les liens de feuille de style en précharges qui échangent en rel="stylesheet" une fois chargés (détails). Js

• "Swap-High": Utilisez <link rel="alternate stylesheet preload"> et échangez-vous sur rel="stylesheet" une fois chargé (détails). Js

• "JS": Injectez un chargeur CSS asynchrone similaire à LOADCSS et utilisez-le pour charger des feuilles de styles. Js

• "JS-Lazy": comme "js" , mais la feuille de style est désactivée jusqu'à ce qu'elle soit complètement chargée.

• Faux: désactive l'ajout de balises de précharge.

Type: (par défaut | "body" | "media" | "swap" | "swap-high" | "js" | "js-lazy" )

Bibliothèques similaires

Il existe un certain nombre d'autres bibliothèques qui peuvent en ligne CSS critique, chacune avec une approche légèrement différente. Voici quelques bonnes options:

• Critique

• Penthouse

• webpack-critique

• webpack-plugin-critique

• html-critique-webpack-plugin

• react-snap

Licence

Apache 2.0

Ce n'est pas un produit Google officiel.