Concatenar todos os JS ou usar CDN Público?

(André Mácola Machado) #1

A algum tempo eu uso o Codekit ou o Grunt para juntar e comprimir todos os arquivos JS servindo com um assets.dominio.com.br/min.js.

Até que um dia estava em um projeto com diversas bibliotecas de terceiros que meu arquivo min.js ficou com cerca de 250k com lógicas bem complexas de JS. Acontece que no iOS8 o Safari começou a dar crash no site algumas vezes e notei uma certa lentidão tmb no iOS. Até encontrei alguns tópicos no site da Apple sobre um possível bug no interpretador JS do iOS.

Coloquei somente o meu JS e todos os arquivos de terceiros usei o CDN do JQuery e o CDNJS do CloudFlare. Resolveu o problema.

Eu vejo muita gente recomendando concatenar tudo em um arquivo só e mandar para o usuário. Como vocês desenvolvem?

Antes eu usava somente os CDN, depois passei a concatenar tudo em um JS só... agora estou voltando a utilizar CDN para cada plugin/biblioteca de terceiros (Jquery, Owl Carousel, iScroll etc...) e aproveitando o cache de possíveis visitas do usuário em outros sites que tmb utilizam CDN Públicos.

(Diego Eis) #2

@andremacola aqui vão minhas opiniões:

  1. Nunca concatene no seu arquivo de JS os plugins, frameworks ou bibliotecas de terceiros. Sempre chame-os separadamente e se possível use-os externamente (CDN ou direto de outro servidor)

  2. Se seu javascript concatenado passou dos 250k, pode ter algo errado. No seu caso, pode ser que você concatenou os frameworks e plugins juntamente com suas funções, o que é fácil de resolver fazendo a primeira dica, mas se o JS chegou a este tamanho contendo apenas as suas funções, acho que você precisa reescrever ou refatorar muito seu código.

  3. Tem muita gente que coloca os arquivos em CDN estrangeiros esperando que algo muito maravilhoso aconteça para usuários brasileiros. Mas CDN só é efetivo porque ele serve o asset a partir do servidor que está mais perto do usuário (e vários outros fatores). Se seus usuários todos são brasileiros, ele vai encontrar um servidor aqui no brasil. Mas seria legal ter um CDN brasileiro, que encontrasse os servidores mais próximos do usuário. Tipo, servir os assets em um servidor de SP para os usuários de SP e assim por diante. Mas não existe isso aí, ainda. Pelo menos nunca ouvi falar que alguma empresa faz.

Eu concateno sempre todas as minhas funções em um arquivo. Fazemos isso aqui no trampo com o nosso framework. Tem javascript para caramba e descompactado tem 113kb. Lembra-se que o Gzip do servidor precisa estar habilitado para esse número cair para sei lá, uns 20k.

É isso aí!

(Sérgio Lopes) #3

E num assunto relacionado: se puder, migre já pra HTTP/2.0 e esqueça essa história toda de concatenar. Estamos usando SPDY/HTTP2 há bastante tempo aqui na Caelum e no Alura. Só sucesso :smile:

E faço coro com o @diegoeis: cuidado com CDNs estrangeiros que podem piorar a performance (mais distante, mais latência). E num mundo com HTTP/2 você vai preferir colocar tudo no mesmo server tbm. Eu só iria pra CDN se você realmente tem uma audiência distribuída globalmente.

(André Mácola Machado) #4

Boa.

Havia esquecido do Gzip.

Quando ao tamanho, tinha muito lixo e muito legado da equipe. No final reduzi para 110kb sem Gzip as bibliotecas/frameworks e pra 8kb sem Gzip o script JS :smile:

Minha dúvida era realmente mais sobre a concatenação de JS de terceiros. Pelo jeito acertei ao voltar a utilizar CDNs (seja público ou privado)

Dica: o https://cdnjs.com/libraries do Cloudflare já tem servidores no Brasil. É uma boa para quem não tiver grana para bancar algo mais robusto e privado.

(André Mácola Machado) #5

Creio que HTTP/2.0 ainda é muito novo para se utilizar em produção e ainda vai variar muito do suporte do navegador.

Hoje eu uso nginx >spdy > fastcgicache > cloudflare e tem me atendido super bem.

(Sérgio Lopes) #6

Então, todos os navegadores modernos suportam SPDY e/ou HTTP/2.0. Até o Safari, pasmem :stuck_out_tongue:

Segundo o caniuse, o SPDY já tem suporte em 95% dos browsers em uso no Brasil. E o HTTP/2 já está em 85% deles. Isso no público geral. Talvez no seu produto seja mais ainda (por aqui é bem mais).

E como ele é compatível com HTTP/1, você não quebra ninguém. Resumindo: suporte ótimo, só crescendo, e você pode usar hoje!

(Elcio Ferreira) #7

Apenas um detalhe sobre esse trecho:

Dica: o https://cdnjs.com/libraries5 do Cloudflare já tem servidores no Brasil. É uma boa para quem não tiver grana para bancar algo mais robusto e privado.

Mesmo para quem tem grana para bancar algo privado, é melhor carregar as bibliotecas comuns de uma CDN popular. Os navegadores fazem cache desses arquivos, então ao carregar seu JS de uma CDN popular, você aumenta muito as chances de economizar hits. Não tem infraestrutura privada que possa competir com isso, a não ser que você seja um Google ou Facebook.

(Valdiney) #8

Olá André,

Sobre usar a CDNJS da CloudFlare, eu encontrei uma opção que me pareceu mais interessante (visto que a CDN da Cloudflare só tem servidores em SP e o Brasil é grandinho, rsrs).

Dá uma olhada nesse host jquery: https://www.gocache.com.br/cdn/cdn-jquery-brasil/

Me pareceu interessante.

Abs,