Maneiras de gerar Critical CSS #381
Replies: 5 comments
-
|
Cara eu estava discutindo isso a alguns dias atrás com um colega de trabalho, dei uma pesquisada em algumas ferramentas para isso, ainda não testei mas acho vale dar uma conferida nessa. |
Beta Was this translation helpful? Give feedback.
-
|
Fala @woliveiras, boa sugestão de tema. |
Beta Was this translation helpful? Give feedback.
-
|
Cheguei em algumas soluções interessantes com webpack.. o exemplo está nesse projeto, quando é gerado o build para produção. A ideia basicamente é:
Nesse caso, eu setei manualmente os arquivos que eu queria que fossem usados para o CRP, mas como o webpack permite usar regex para escolher os arquivos, daria pra colocar no final do arquivo um
Com isso já resolve uma parte do problema =) O próximo passo é fazer isso usando Com certeza não é a melhor solução, mas resolve bem o problema, permitindo ainda componentizar a aplicação de forma bem fácil =) |
Beta Was this translation helpful? Give feedback.
-
|
Que loucura galera. Fazemos bem parecido com seu caso @gbrlsepulveda. E é essa a treta: queríamos parar de ter que subir a aplicação. 😁 Talvez um esquema parecido com o que o @fdaciuk comentou e setar manualmente seja o caminho pra o caso lá no trampo. Vamos testar!! |
Beta Was this translation helpful? Give feedback.
-
|
Passando só para lembrar que não se deve usar CSS crítico em todo e qualquer caso. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Fala galera, estou abrindo essa issue para perguntar como vocês estão gerando o Critical CSS de suas aplicações.
Aqui temos uma tarefa no Grunt que roda a task para gerar e adicionar o Critical na hora do deploy. Porém para isso acontecer a aplicação precisa estar rodando via localhost:8000, onde a tarefa vai analisar o código e retornar somente o que aparece acima da borda.
A dúvida é: teria alguma maneira de gerar isso sem a necessidade da aplicação estar rodando?
Nós pensamos em diversas maneiras, mas eu gostaria de validar com vocês como estão fazendo para coletar mais dicas. 😄
Beta Was this translation helpful? Give feedback.
All reactions