O valor de um CDN está na probabilidade de o usuário já ter visitado outro site chamando o mesmo arquivo desse CDN, e torna-se cada vez mais valioso dependendo do tamanho do arquivo. A probabilidade de ser esse o caso aumenta com a onipresença do arquivo solicitado e a popularidade do CDN.
Com isso em mente, extrair um arquivo relativamente grande e popular de um CDN popular faz todo o sentido. jQuery e, em um grau menor, jQuery UI, se encaixam nesse projeto.
Enquanto isso, concatenar arquivos faz sentido para arquivos menores que provavelmente não mudarão muito - seus plug-ins comumente usados se encaixam nesse projeto, mas seu código específico de aplicativo principal provavelmente não: ele pode mudar de semana para semana, e se você ' Ao concatená-lo com todos os outros arquivos, você teria que forçar o usuário a baixar tudo novamente.
O boilerplate HTML5 faz um bom trabalho ao fornecer uma solução genérica para isso:
- Modernizr é carregado do local na cabeça: é muito pequeno e difere bastante de instância para instância, então não faz sentido obtê-lo de um CDN e não vai prejudicar muito o usuário carregá-lo de seu servidor. Ele é colocado na cabeça porque o CSS pode estar fazendo uso dele, então você quer que seus efeitos sejam conhecidos antes que o corpo seja renderizado. Todo o resto vai na parte inferior, para impedir que seus scripts mais pesados bloqueiem a renderização enquanto carregam e executam.
- jQuery do CDN, já que quase todo mundo usa e é bastante pesado. O usuário provavelmente já terá isso armazenado em cache antes de visitar seu site e, nesse caso, ele irá carregá-lo do cache instantaneamente.
- Todas as suas dependências menores de terceiros e trechos de código que provavelmente não serão muito alterados são concatenados em um
plugins.js
arquivo carregado de seu próprio servidor. Isso será armazenado em cache com um cabeçalho de expiração distante na primeira vez que o usuário visitar e carregado do cache nas visitas subsequentes.
- Seu código principal entra
main.js, com um cabeçalho de expiração mais próximo para explicar o fato de que a lógica de seu aplicativo pode mudar de semana para semana ou de mês para mês. Dessa forma, quando você corrige um bug ou introduz uma nova funcionalidade quando o usuário visita daqui a quinze dias, isso pode ser carregado novamente enquanto todo o conteúdo acima pode ser trazido do cache.
Para suas outras bibliotecas principais, você deve examiná-las individualmente e se perguntar se elas devem seguir o exemplo do jQuery, ser carregadas individualmente de seu próprio servidor ou serem concatenadas. Um exemplo de como você pode chegar a essas decisões:
- Angular é incrivelmente popular e muito grande. Obtenha-o no CDN.
- O Twitter Bootstrap está em um nível semelhante de popularidade, mas você tem uma seleção relativamente pequena de seus componentes e, se o usuário ainda não o tiver, pode não valer a pena fazer o download dele completo. Dito isso, a maneira como ele se encaixa no resto do seu código é bastante intrínseca, e você provavelmente não irá alterá-lo sem reconstruir todo o site - então você pode querer mantê-lo hospedado localmente, mas manter seus arquivos separados de seu principal
plugins.js. Desta forma, você sempre pode atualizar seu plugins.jscom extensões do Bootstrap sem forçar o usuário a baixar todo o núcleo do Bootstrap.
Mas não é obrigatório - sua milhagem pode variar.