Download critters - download do código -fonte critters

critters

Outro código-fonte

3.0.2

Baixar

Cuidado

A propriedade de criaturas mudou -se para a equipe da Nuxt, que manterá o projeto daqui para frente. Se você quiser continuar usando as criaturas, mude para o garfo de forma ativa em https://github.com/danielroe/beasties. Este repositório agora está arquivado e não receberá atualizações futuras.

Criaturas

As criaturas são um plug-in que envolve o CSS crítico do seu aplicativo e carrega preguiçosos pelo restante.

criaturas

É um pouco diferente de outras opções, porque não usa um navegador sem cabeça para renderizar o conteúdo. Essa troca permite que as criaturas sejam muito rápidas e leves . Isso também significa que as criaturas inlinem todas as regras CSS usadas pelo seu documento, em vez de apenas as necessárias para o conteúdo acima das dobras. Para alternativas, consulte bibliotecas semelhantes.

O design das criaturas faz com que seja um bom ajuste ao prender CSS crítico para aplicativos de página única pré -renderizada/ssr'd. Foi desenvolvido para ser um excelente elogio ao carregador de pré-render, combinando para melhorar drasticamente o primeiro tempo de pintura para a maioria dos aplicativos de página única.

Características

Rápido - sem navegador, poucas dependências
Integra-se com britters webpack-webpack-plugin
Suporta fontes críticas de pré -carregamento e/ou embaraço
Prunes não utilizados CSS Keyframes e consultas de mídia
Remove as regras CSS inlinadas de folhas de estilos com carregamento preguiçoso

Instalação

Primeiro, instale as criaturas como uma dependência de desenvolvimento:

 NPM I -D Critters

ou

 bichos add -d de fios

Exemplo simples

 Importar criaturas de 'criaturas'; const criaturas = novas criaturas ({
  // Configuração opcional (veja abaixo)}); const html = `<Style> .red {color: Red} .Blue {color: Blue} </style> <div class =" Blue "> eu sou azul </ div> `; const inlined = wait britters.process (html); console.log (inlined); // "<Style> .Blue {Color: Blue} </style> <div class =" azul "> eu sou azul </div>"

Uso com Webpack

As criaturas também estão disponíveis como um plug-in do Webpack chamado Critters-Webpack-Plugin.

O plug -in do Webpack suporta as mesmas opções de configuração que o pacote principal critters :

 // webpack.config.js+const britters = requer ('criaturas-webpack-plugin'); module.exports = {
  Plugins: [+ novas criaturas ({+ // Configuração opcional+ pré -carga: 'swap',+ inclui os selecionadores: [/^.btn/, '.banner'],+})
  ]
}

É isso! O HTML resultante terá seu CSS crítico envolto e as folhas de estilo preguiçosas.

Uso

Criaturas

Tudo opcional. Passe para new Critters({ ... }) .

Parâmetros

options

Propriedades

path String Path Base Path Localização dos arquivos CSS (padrão: '' )
publicPath String Public Path of the CSS Resources. Este prefixo é removido do href (padrão: '' )
Estilos embutidos booleanos external de folhas de estilo externas (padrão: true )
Número inlineThreshold folhas de estilo externas embutidas menores que um determinado tamanho (padrão: 0 )
minimumExternalSize Número Se a folha de estilo externa não crítica estivesse abaixo desse tamanho, basta embalar (padrão: 0 )
pruneSource boolean Remova regras inlinadas da folha de estilo externa (padrão: false )
mergeStylesheets Boolean mesclou folhas de estilos inlinadas em uma única tag <style> (padrão: true )
additionalStylesheets ARRAY <String> Glob para combinar outras folhas de estilo a serem usadas enquanto procura CSS crítico.
reduceInlineStyles O opção booleano indica se os estilos embutidos devem ser avaliados quanto ao CSS crítico. Por padrão, as tags de estilo embutido serão avaliadas e reescritas para conter apenas CSs críticos. Defina -o como false para pular estilos de processamento em linha. (Padrão: true )
String preload que pré -carregue a estratégia para usar
noscriptFallback boolean Add <noscript> Fallback às estratégias baseadas em JS
inlineFonts Boolean Inline Critical Fonte-Face Regras (Padrão: false )
pré -encostos preloadFonts booleanos fontes críticas (padrão: true )
fonts taquigrafia booleana para definir inlineFonts + preloadFonts * valores:

true às regras da face da fonte crítica embutida e pré-carregue as fontes
false para não incluir regras de font-face e não pré-carregue fontes

Os string keyframes controlam quais regras dos quadros -chave estão inlinadas.* Valores:

"critical" : (padrão) Regras de chaves em linha usadas pelo CSS crítico
"all" Inline todas as regras dos quadros -chave
"none" remove todas as regras dos quadros -chave

compress compressa compressa CSS crítico resultante (padrão: true )
logLevel String controla o nível de log do plug -in (padrão: "info" )
Objeto logger fornece um registrador de registrador personalizado
includeSelectors regexp | String Forneça uma lista de seletores que devem ser incluídos no CSS crítico. Aceite regexp e string.

Incluir/excluir regras

Podemos incluir ou excluir regras para fazer parte do CSS crítico adicionando comentários no CSS

Comentários de linha única para incluir/excluir a próxima regra CSS

 / * Critters: exclude */. Selector1 {/ * Esta regra será excluída do CSS crítico */}

.Selector2 {/ * Isso será avaliado normalmente */}/ * Critters: inclua */. Selector3 {/ * Esta regra será incluída no CSS crítico */}

.Selector4 { / * Isso será avaliado normalmente * /}

Incluindo/excluindo várias regras adicionando marcadores de partida e final

 / * Critters: exclua start */. Selector1 {/ * Esta regra será excluída do CSS crítico */}

.Selector2 {/ * Esta regra será excluída do CSS crítico */}/ * criaturas: exclua o final */

 / * Critters: Incluir Start */. Selector3 {/ * Esta regra será incluída no CSS crítico */}

.Selector4 {/ * Esta regra será incluída no CSS crítico */}/ * criaturas: inclua fim */

Contêiner de criaturas

Por padrão, as criaturas avalia o CSS em relação a toda a entrada HTML. As criaturas avaliam o CSS crítico reconstruindo todo o DOM e avaliando os seletores CSS para encontrar nós correspondentes. Geralmente, isso funciona bem como as criaturas é leve e rápido.

Para alguns casos, o HTML de entrada pode ser muito grande ou profundamente aninhado, o que torna o DOM reconstruído muito maior, o que, por sua vez, pode diminuir a velocidade da geração crítica do CSS. As criaturas não estão cientes do tamanho do viewport e de que nós específicos estão acima da dobra, pois não há um navegador sem cabeça envolvido.

Para superar essa questão, as criaturas utilizam contêineres de criaturas .

Um contêiner de criaturas imita a viewport e pode ser ativado adicionando data-critters-container ao contêiner de nível superior que contém os elementos HTML acima da dobra.

Você pode estimar o conteúdo do seu viewport e adicionar um <Div data-critters-container > em torno do conteúdo.

 <html>
  <Body> <div class = "contêiner"> <div dados-critadores-contadores>/ * html dentro deste contêiner são usados para avaliar CSS críticos */</div>/ * html é ignorado ao avaliar CSS críticos */</</ Div> <Footer> </do Footer>
  </body> </html>

Nota: Esta é uma maneira fácil de melhorar o desempenho das criaturas

Logger

Interface de logger personalizada:

Tipo: objeto

Propriedades

Função trace (string) imprime uma mensagem de rastreamento
Função debug (string) imprime uma mensagem de depuração
Função info (string) imprime uma mensagem de informação
A função warn (string) imprime uma mensagem de aviso
Função error (string) imprime uma mensagem de erro

Loglevel

Controla o nível de log do plug -in. Especifica o nível que o madeireiro deve usar. Um madeireiro não produzirá saída para nenhum nível de log abaixo do nível especificado. Os níveis e pedidos disponíveis são:

"Info" (padrão)
"avisar"
"erro"
"Trace"
"depurar"
"Silencioso"

Pré -encomenda

O mecanismo a ser usado para folhas de estilo de carregamento preguiçoso.

Nota: O JS indica uma estratégia que requer JavaScript (volta a <noscript> , a menos que seja desativado).

Padrão: Mova os links da folha de estilo para o final do documento e insira metatags de pré -carga em seu lugar.
"Body": mova todos os links de folha de estilo externos para o final do documento.
"Mídia": carregar folhas de estilo de forma assíncrona adicionando media="not x" e removendo uma vez carregado. JS
"Swap": converta links de folha de estilo para pré -carregamentos que trocam para rel="stylesheet" uma vez carregados (detalhes). JS
"Swap-High-High": use <link rel="alternate stylesheet preload"> e swap para rel="stylesheet" uma vez carregado (detalhes). JS
"JS": Injete um carregador CSS assíncrono semelhante ao loadcss e use -o para carregar as folhas de estilo. JS
"JS-LAZY": como "js" , mas a folha de estilo é desativada até ficar totalmente carregada.
Falso: desativa a adição de tags pré -carregamento.

Bibliotecas semelhantes

Existem várias outras bibliotecas que podem incluir CSS críticos, cada uma com uma abordagem ligeiramente diferente. Aqui estão algumas ótimas opções: