critters

Precaución

La propiedad de Critters se ha mudado al equipo de Nuxt, quien mantendrá el proyecto en el futuro. Si desea seguir usando criaturas, cambie a la bifurcación activamente mantenida en https://github.com/danielroe/beasties. Este repositorio ahora está archivado y no recibirá ninguna actualización futura.

Criaturas

Critherters es un complemento que insinúa el CSS crítico de su aplicación y lazada cargue el resto.

criaturas

Es un poco diferente de otras opciones, porque no usa un navegador sin cabeza para renderizar contenido. Esta compensación permite que las criaturas sean muy rápidas y livianas . También significa que los bichos ingresan todas las reglas CSS utilizadas por su documento, en lugar de solo las necesarias para el contenido superior. Para alternativas, ver bibliotecas similares.

El diseño de los criaturas lo hace un buen ajuste al enrollar CSS críticos para aplicaciones de una sola página prerendered/SSR'd. Se desarrolló para ser un excelente cumplido para el cargador prerender, combinando para mejorar drásticamente el primer tiempo de pintura para la mayoría de las aplicaciones de una sola página.

Características

• Rápido: sin navegador, pocas dependencias

• Se integra con Webpack Critters-Webpack-Plugin

• Admite la precarga y/o en la inserción de fuentes críticas

• Piras no utilizadas

• Elimina las reglas de CSS en línea de hojas de estilo cargadas de perezoso

Instalación

Primero, instale criaturas como una dependencia del desarrollo:

 npm i -d criaturas

o

 criaturas de yarn add -d

Ejemplo simple

 Importar criaturas de 'criaturas'; const briterhters = nuevos criaturas ({
  // Configuración opcional (ver a continuación)}); const html = `<syle> .red {color: rojo} .blue {color: azul} </style> <div class =" azul "> Soy azul </ div> `; const inlined = await critters.process (html); console.log (inlined); //" <Syle> .Blue {color: azul} </style> <div class = "Blue"> Soy azul </div> "

Uso con Webpack

Critters también está disponible como un complemento webpack llamado Critherters-Webpack-Plugin.

El complemento Webpack admite las mismas opciones de configuración que el paquete principal critters :

 // webpack.config.js+const critters = require ('critters-webpack-plugin'); module.exports = {
  Plugins: [+ nuevos criaturas ({+ // Configuración opcional+ Preload: 'Swap',+ INCENDERELECTORES: [/^.btn/, '.Banner'],+})
  ]
}

¡Eso es todo! El HTML resultante tendrá su CSS crítico en línea y las hojas de estilo cargadas.

Uso

Criaturas

Todo opcional. Pasarlos a new Critters({ ... }) .

Parámetros

• options

Propiedades

• Cadena path Ubicación de ruta base de los archivos CSS (predeterminado: '' )

• publicPath Cadena Puta pública de los recursos CSS. Este prefijo se elimina del href (predeterminado: '' )

• Estilos en línea booleanos external de hojas de estilo externos (predeterminado: true )

• Número inlineThreshold en línea hojas de estilos externos más pequeñas que un tamaño dado (predeterminado: 0 )

• Número minimumExternalSize si la hoja de estilo externa no crítica estaría por debajo de este tamaño, solo en línea (predeterminado: 0 )

• pruneSource Boolean Eliminar reglas en línea de la hoja de estilo externo (predeterminado: false )

• mergeStylesheets hojas booleanas fusionadas fusionadas hojas de estilo en una sola etiqueta <style> (predeterminada: true )

• Array de additionalStylesheets <String> Glob para que coincidan con otras hojas de estilo que se utilizarán mientras busca CSS crítico.

• La opción booleana reduceInlineStyles indica si los estilos en línea deben evaluarse para CSS críticos. Por defecto, las etiquetas de estilo en línea se evaluarán y reescribirán solo para contener CSS crítico. Contácalo en false para omitir los estilos de procesamiento en línea. (predeterminado: true )

• cadena preload que estrategia de precarga de usar

• noscriptFallback boolean add <noscript> Fallback a estrategias basadas en JS

• inlineFonts reglas de fuente crítica en línea booleana (predeterminado: false )

• preloadFonts Fuentes críticas de precargos booleanos (predeterminado: true )

• fonts abreviadas boolean para configurar inlineFonts + preloadFonts * Valores:

• true a las reglas críticas de la fuente crítica en línea y precarga las fuentes

• false para no en línea ninguna regla de cara de fuente y no precarga las fuentes

• Controles de cadena de keyframes ¿Qué reglas de fotogramas clave se ingresan?* Valores:

• "critical" : (predeterminado) Reglas de cuadros de teclas en línea utilizadas por el CSS crítico

• "all" en línea todas las reglas de fotogramas clave

• "none" Elimine todas las reglas de cuadros de teclas

• compress Compresión booleana CSS crítico resultante (predeterminado: true )

• logLevel String Controla el nivel de registro del complemento (predeterminado: "info" )

• Object logger Proporcionar un registrador de interfaz de registrador personalizado

• includeSelectors electores regexp | La cadena proporciona una lista de selectores que deben incluirse en el CSS crítico. Acepta tanto regexp como cadena.

Incluir/excluir reglas

Podemos incluir o excluir las reglas para formar parte de CSS crítico agregando comentarios en el CSS

Comentarios de una sola línea para incluir/excluir la siguiente regla CSS

 / * criaturas: excluir */. Selector1 {/ * Esta regla será excluida de CSS */} crítico

.selector2 {/ * Esto se evaluará normalmente */}/ * criaturas: incluir */. Selector3 {/ * Esta regla se incluirá en el CSS */} crítico

.selector4 { / * Esto se evaluará normalmente * /}

Incluyendo/excluyendo múltiples reglas agregando marcadores de inicio y finalización

 / * criaturas: excluir inicio */. Selector1 {/ * Esta regla será excluida de CSS */} crítico

.selector2 {/ * Esta regla será excluida de CSS */}/ * criaturas: excluir final */

 / * criaturas: incluir inicio */. Selector3 {/ * Esta regla se incluirá en el CSS */} crítico

.selector4 {/ * Esta regla se incluirá en el CSS crítico */}/ * criaturas: incluir end */

Contenedor de criaturas

Por defecto, las criaturas evalúan el CSS contra toda la entrada HTML. Los criaturas evalúan el CSS crítico reconstruyendo todo el DOM y evaluando los selectores CSS para encontrar nodos coincidentes. Por lo general, esto funciona bien como criaturas es liviano y rápido.

Para algunos casos, el HTML de entrada puede ser muy grande o profundamente anidado, lo que hace que el DOM reconstruido sea mucho más grande, lo que a su vez puede ralentizar la generación crítica de CSS. Los bichos no son conscientes del tamaño de la visión y qué nodos específicos están por encima del pliegue, ya que no hay un navegador sin cabeza involucrado.

Para superar este problema, los bichos hacen uso de los contenedores de criaturas .

Un contenedor de criaturas imita la ventana gráfica y se puede habilitar agregando data-critters-container en el contenedor de nivel superior que contenga los elementos HTML sobre el pliegue.

Puede estimar el contenido de su ventana gráfica y agregar un <Div data-critters-container > alrededor del contenido.

 <html>
  <body> <div class = "Container"> <Div data-critters-container>/ * html dentro de este contenedor se usan para evaluar CSS */</div>/ * html se ignora al evaluar CSS */</ </</</</</</</</</</</</</</</</< Div> <Tooter> </footer>
  </body> </html>

Nota: Esta es una manera fácil de mejorar el rendimiento de los bichos

Maderero

Interfaz de registrador personalizado:

Tipo: Objeto

Propiedades

• La función trace (cadena) imprime un mensaje de seguimiento

• La función debug (cadena) imprime un mensaje de depuración

• Función info (String) Imprime un mensaje de información

• warn Function (String) imprime un mensaje de advertencia

• Función error (String) Imprime un mensaje de error

Loglevel

Controla el nivel de registro del complemento. Especifica el nivel que debe usar el registrador. Un registrador no producirá salida para ningún nivel de registro debajo del nivel especificado. Los niveles y el pedido disponibles son:

• "Información" (predeterminada)

• "advertir"

• "error"

• "rastro"

• "depurar"

• "silencioso"

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

Preloadstrategy

El mecanismo para usar para hojas de estilo de carga perezosa.

NOTA: JS indica una estrategia que requiere JavaScript (se vuelve a ser <noscript> a menos que esté deshabilitado).

• Valor predeterminado: mueva los enlaces de la hoja de estilo al final del documento e inserte meta etiquetas de precarga en su lugar.

• "Body": mueva todos los enlaces de hoja de estilo externo al final del documento.

• "Medios": Cargue las hojas de estilo asincrónicamente agregando media="not x" y eliminando una vez cargado. Js

• "Swap": Convertir enlaces de hoja de estilo a precargas que intercambian a rel="stylesheet" una vez cargadas (detalles). Js

• "Swap-High": use <link rel="alternate stylesheet preload"> y Swap a rel="stylesheet" una vez cargado (detalles). Js

• "JS": inyecte un cargador CSS asincrónico similar a LoadCSS y úselo para cargar hojas de estilo. Js

• "JS Lazy": me gusta "js" , pero la hoja de estilo se deshabilita hasta que se carga completamente.

• FALSO: Desactiva agregar etiquetas de precarga.

Tipo: (predeterminado | "body" | "media" | "swap" | "swap-high" | "js" | "js-lazy" )

Bibliotecas similares

Hay una serie de otras bibliotecas que pueden en línea CSS crítico, cada una con un enfoque ligeramente diferente. Aquí hay algunas excelentes opciones:

• Crítico

• Ático

• webpack-crítico

• webpack-plugin-crítico

• html-critical-webpack-plugin

• reaccionar

Licencia

Apache 2.0

Este no es un producto oficial de Google.