Devo combinar arquivos js / css em um único arquivo?

11

Os complementos do YSlow e do Page Speed do Google recomendam a combinação de arquivos de script (e estilo) em um único arquivo para reduzir o número de solicitações HTTP, e certamente posso entender quando os arquivos de script são consistentes em todo o site, mas para um aplicativo Web com requisitos diferentes em todo o site.

Na minha opinião, existem algumas opções:

  1. Combine todos os arquivos usados ​​no site e todas as páginas obtêm o mesmo arquivo combinado - a desvantagem é o conteúdo não utilizado que atravessa o script (e uma primeira carga mais pesada (também recarrega quando qualquer script de componente é alterado))

  2. Combine os arquivos por página - a desvantagem é que cada página com requisitos diferentes obtém um arquivo combinado diferente (primeiro carregamento mais pesado para cada tipo de página)

  3. Ignore a estrita interpretação "apenas um arquivo" das recomendações e faça com que a página seja carregada em vários arquivos, conforme apropriado, com o armazenamento em cache negando o número de solicitações HTTP no caso geral - a desvantagem é o número de solicitações HTTP em cada página

Pensamentos?

Cebjyre
fonte
Você está fazendo isso errado. Separe as partes em arquivos individuais e faça o aquecimento (causado por um número maior de solicitações e cache a frio) ou combine programaticamente o servidor de arquivos de origem e sirva apenas 1 página js, css e html por link físico. Misturando arquivos com diferentes tipos de mímica = incorreto.
Evan Plaice
E ... como @Larry Smithmier disse em sua resposta, use uma CDN (ex. Google) para fornecer bibliotecas comuns (ex. Jquery) para evitar completamente os custos iniciais de aquecimento do cache desses arquivos.
Evan Plaice

Respostas:

11

A opção 2 é a pior; significa que cada página com uma combinação diferente de scripts JS necessários resultará em uma solicitação HTTP. Isso tornará o desempenho muito pior.

A opção 1 é a melhor. Eventualmente, a maioria dos usuários visitará a maioria dos "tipos" de página do seu site, por isso ainda é vantajoso combinar tudo em um único arquivo, com talvez a exceção de arquivos JS grandes que são necessários em poucas páginas raramente visitadas.

O hit da primeira página pode ser mais lento do que com arquivos diferentes, mas ainda vale a pena fazer, pois todos os outros hits da página usam o JS global em cache.

Uma dica embora; mesclá-los automaticamente se você ainda não estiver!

Thomas Bonini
fonte
2
Embora você precise estar muito ciente da impressão inicial dada pela sua página inicial / páginas de destino. Se a primeira página que o visitante vê é lenta para carregar, eles podem não se dar ao trabalho de olhar para uma segunda página.
pelms
Outra opção, especialmente se o site depender muito de uma página de destino ou de uma primeira impressão forte, seria minimizar o tamanho dos arquivos exibidos nessa primeira página e depois servir os arquivos combinados em todas as outras páginas.
Travis Northcutt
4

Geralmente, eu combino "Javascript global" - jQuery e plugins comuns - em um único arquivo e, em seguida, sirvo plugins extras como arquivos separados, quando necessário.

Por exemplo, em um site que eu corro, muitas das páginas têm tabelas de dados, então eu tenho um global.jscom jQuery, DataTables e SuperFish (para o meu menu). Existem duas páginas no site que usam uma "caixa de luz", então eu tenho um script separado para essas duas páginas.

Para CSS, apenas sirvo um único arquivo para todo o site e tento tornar o CSS o mais geral possível - a maioria das páginas possui apenas alguns elementos CSS exclusivos.

DisgruntledGoat
fonte
1

Embora seja definitivamente recomendável usar o menor número possível de arquivos, você pode achar que possui uma divisão entre a funcionalidade necessária no carregamento da página e a funcionalidade que pode ser adiada através do carregamento assíncrono.

Se um número suficiente de seu JS puder ser inserido na segunda categoria, você poderá melhorar a velocidade de carregamento inicial percebida da página, criando uma experiência melhor para seus usuários.

JasonBirch
fonte
1

Eu não sugeriria combinar todos eles. Se você estiver usando uma biblioteca comum, poderá utilizar uma CDN para entregar seus javascripts. Você pode aproveitar o cache do navegador (supondo que outros sites estejam usando o mesmo CDN) e a entrega distribuída. A Microsoft e o Google têm soluções (também não usei honestamente, mas certamente vou começar) e pode haver outras. Em uma nota relacionada, SO tem esta pergunta:

Quando o navegador limpa automaticamente o cache de JavaScript?

e a primeira resposta é ouro maciço.

Larry Smithmier
fonte
2
Eu já estou usando a biblioteca jQuery hospedada no Google, mas pretendi que essa pergunta se referisse a arquivos específicos do site (ou seja, para sites de troca de pilhas, ao fazer uma pergunta, você tem o script para procurar perguntas semelhantes, o script a ser renderizado a remarcação e as sugestões de tags, que podem ser desenvolvidas em arquivos separados). Além disso, se você usar os js hospedados no Google jQuery, enquanto 1.4 e 1.4.2 fornecerão o mesmo conteúdo (no momento), o 1.4.2 será armazenado em cache por um ano, mas o 1.4 será armazenado em cache por uma hora.
Cebjyre
dica legal! obrigado pela compreensão da duração do armazenamento em cache no jQuery hospedado.
Larry Smithmier