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

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?

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!

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.

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.

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.