Ao mesclar CSS ou JS, um novo arquivo é gerado para cada tipo de página

15

Temos muitos arquivos CSS e JS pequenos e ativar a mesclagem parece ser uma boa escolha.

Muitos dos arquivos CSS e JS são usados em todas as páginas (página inicial, página de categoria, página de detalhes do produto).

Sempre que vimos que um arquivo mesclado diferente é carregado novamente em cada página, mesmo o CSS contido deve estar sobreposto.

Como podemos evitar isso e reutilizar mais dados?

css javascript frontend

— Alex
fonte

Alex, você está incluindo diferentes arquivos css e js em páginas diferentes? Você tem um link ou alguma informação que confirme que essa compilação / fusão extra está acontecendo? Vi algo sobre isso outro dia e gostaria de saber mais. Recentemente, tivemos problemas para compilar / mesclar nosso JS.

— Mark Weston

Não possui um link público. Mas, por exemplo, nas páginas de produtos, tenho alguns arquivos .csse adicionais .js. Em uma instalação padrão do Magento, na verdade, os .cssarquivos são praticamente os mesmos globalmente, portanto, o arquivo mesclado tem um hash idêntico. Mas .jsisso difere muito - portanto, há um arquivo recentemente combinado para páginas de produtos, páginas de categorias e assim por diante - sempre incluindo a lib protótipo completa.

— Alex

Eu estava procurando pelo recurso "Mesclar arquivos Javascript", para ajudar no bloqueio de cache. Esperemos que este comentário atualize o mecanismo de pesquisa e evite dups.

— Ray Foss

14

Resposta curta: nunca ative a função de mesclagem JS / CSS do Magento. No geral, é pior para o desempenho durante o ciclo de vida de um checkout típico do que enviar cada ativo individualmente.

Resposta longa: você deve veicular apenas um arquivo CSS para os usuários. Vários arquivos bloqueiam a renderização até que todo o CSS seja baixado. A menos que você esteja servindo uma grande quantidade de CSS, é vantajoso enviar tudo de uma vez, então o navegador o armazena em cache. Usar um pré-processador como Sass ou LESS pode trazer essa etapa para o seu processo de compilação, em vez de deixar o Magento fazer isso de maneira ineficiente.

Para JS, idealmente, você não deve combinar estes do lado do servidor. Os carregadores de scripts do lado do cliente, como o AMD / RequireJS, são melhores opções e ajudam a gerenciar dependências, o que o Layout XML do Magento não. No mundo real, embora o Magento solte scripts em vários pontos do fluxo de caixa. Ainda é melhor aproveitar o hit de carregamento da página inicial de várias solicitações e ter ativos separados, mas armazenados em cache posteriormente.

A extensão Fooman Speedster Advanced é sua melhor aposta para combinar ativos de maneira inteligente sem duplicação (hoje).

Você está um pouco limitado pela arquitetura Magento 1.x, que começa com um monte de práticas ruins para desempenho de front-end. Não é realista mudar o curso desse navio. Contribua para o Magento 2.

— Brendan Falkowski
fonte

11

"Contribua para o Magento 2."

— benmarks

6

Temos usado a extensão Fooman Speedster Magento . É uma extensão maravilhosa que lida com a fusão de arquivos CSS e JS para aumentar o desempenho da sua página.

Na página:

Acelere sua loja combinando, compactando e armazenando em cache arquivos Javascript e CSS. O Fooman Speedster combina vários arquivos Javascript e CSS em um único arquivo Javascript e em um único arquivo CSS, para permitir tempos de carregamento de página mais rápidos.

— Kenny
fonte

4

Obrigado pela menção. Gostaria de destacar minha outra extensão gratuita do Speedster (Speedster Advanced), que vem com um otimizador de tema para reduzir as duplicatas nos arquivos Javascript mesclados - Por favor, veja minha apresentação na Ibiza Developer Conference 2012 aqui magento-developers-paradise.com / wp-content / uploads /… para detalhes.

— Kristof em Fooman

Eu fiz muitos testes. Não se livra de todas as redundâncias, mas se livra de algumas. E não é o melhor minificador, mas a remoção de redundância compensa o que você pode fazer por si mesmo com um script de shell. @KristofatFooman Se você pudesse usar o sistema uglifyjs --compresse lidar melhor com os comentários, poderia obter uma melhoria adicional de cerca de 4% menor no meu código. estou usando o uglifyjs v3 do nó.

— Ray Foss