2

Qual a melhor forma de se trabalhar com Bootstrap ou JavaScript?

  1. Referenciar pela CDN

    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    
  2. Referenciar pelo arquivo baixado

    link rel="stylesheet" href="css/bootstrap.min.css
    
3
  • 1
    Bruno, procure ser mais claro em suas perguntas assim o pessoal consegue entender o seu problema e te ajudar. 1/06/2018 às 14:43
  • Referencie dos arquivos baixados assim você ganha em performasse pois seu site não vai precisar baixar os arquivos de outros site, estando tudo alocado no seu próprio servidor. 1/06/2018 às 14:48
  • Não fique na mão do CDN, se ele estiver offline seu site vai ficar todo quebrado! Pense melhor
    – hugocsl
    1/06/2018 às 14:56

1 Resposta 1

5

As duas formas são complementares e ambas com suas respectivas vantagens de desvantagens.

Idealmente, você deve preferir sempre a versão que está no CDN, pois, como é óbvio, está no CDN. Um arquivo no CDN normalmente será carregado muito mais rápido que um no próprio servidor, ainda mais quando se tratando de Bootstrap e Jquery, que são utilizados na grande maioria dos sites. Isso acontece porque, se o seu cliente já tiver acessado qualquer outro site que utiliza o mesmo arquivo na CDN, o cliente já terá a versão utilizada baixada em seu computador e, assim, utilizará a mesma. Não se preocupe, o navegador faz todo o trabalho pesado por você.

Mas se acontecer do cliente não possuir a versão já baixada e a conexão com o servidor CDN estiver instável, sua aplicação não conseguirá carregar corretamente. Depender de aplicações externas, que não temos controle, nem sempre é uma boa opção. Se o arquivo for pequeno e não prejudicar o carregamento da sua aplicação, você pode utilizar apenas a versão local, apontando para o arquivo no seu próprio servidor.

Caso queira utilizar as vantagens das duas soluções, aconselho você a importar o arquivo direto do CDN e criar um fallback com JavaScript para que, se o arquivo não for carregado com sucesso, importe a sua versão local. Desta forma, se o CDN estiver disponível, utilizará todas as vantagens do mesmo, mas quando não, carregará a versão local, mesmo demandando mais tempo de carregamento da aplicação, mas evitando que a mesma fique quebrada.

É bastante comum ver esta abordagem na importação do jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.10.2.min.js"><\/script>')</script>

Na primeira linha é importado a biblioteca a partir do que seria equivalente ao CDN. Se esta requisição falhar, o objeto window.jQuery continuará a ser nulo, fazendo com que na segunda linha seja criado o script de importação do arquivo local.

Nota: inclusive nada te impede utilizar outro serviço CDN como fallback, mas igualmente ele possuiria os mesmos problemas e, idealmente, teria que possuir outro fallback para ele; depende muito do projeto que está fazendo, mas sinceramente nunca vi alguma aplicação que utilizasse múltiplos fallbacks e que foi prejudicada por não utilizar.

Leituras adicionais

3
  • Eu uso diversas libs, jquery, bootstrap, select2, datatables e outras. Tudo via cdn, teria que fazer esse fallback para cada uma delas?
    – L.J
    1/06/2018 às 16:28
  • 1
    @L.J basicamente, sim, ou você compacta tudo em um arquivo só e importa apenas ele. Fazer isso pode ser até mais rápido que múltiplas requisições a vários CDNs.
    – Woss
    1/06/2018 às 17:44
  • Você diz colocar todas requisições em um arquivo e chamar esse arquivo nas páginas? Isso seria ótimo. Como é feito isso?
    – L.J
    1/06/2018 às 18:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .