ti-enxame.com

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

Os complementos YSlow e velocidade da página 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 ver o ponto disso quando os arquivos de script são consistentes em todo o site, mas para um aplicativo Web que possui requisitos diferentes em todo o site.

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

  1. Combine todos os arquivos usados ​​em todo o 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 - o lado negativo é o número de solicitações HTTP em cada página

Pensamentos?

11
Cebjyre

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, talvez com exceção dos arquivos JS grandes, 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!

11
Thomas Bonini

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.js com 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, sirvo apenas um 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.

4
DisgruntledGoat

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. Microsoft e Google cada um tem 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.

1
Larry Smithmier

Embora seja definitivamente recomendável usar o menor número possível de arquivos, você pode achar que há 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 uma quantidade suficiente de seu JS puder ser inserida na segunda categoria, você poderá melhorar a velocidade de carregamento inicial percebida da página, criando uma experiência melhor para seus usuários.

1
JasonBirch