Devo usar o Bootstrap da CDN ou fazer uma cópia no meu servidor?

140

Qual é a melhor prática de usar o Twitter Bootstrap, consulte a CDN ou faça uma cópia local no meu servidor?

Como o Bootstrap continua evoluindo, receio que, se me referir à CDN, o usuário verá diferentes páginas da Web ao longo do tempo e algumas tags podem até quebrar. Qual é a escolha da maioria das pessoas?

shapeare
fonte

Respostas:

204

Por que não os dois ¯ \ _ (ツ) _ / ¯? Scott Hanselman tem um ótimo artigo sobre o uso de uma CDN para obter ganhos de desempenho, mas normalmente retorna a uma cópia local, caso a CDN esteja inativa .

Específico ao bootstrap, você pode fazer o seguinte para carregar de uma CDN com um fallback local :

Demonstração de trabalho no Plunker

<head>
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
  <!-- Bootstrap CSS local fallback -->
  <script>
    var test = document.createElement("div")
    test.className = "hidden d-none"

    document.head.appendChild(test)
    var cssLoaded = window.getComputedStyle(test).display === "none"
    document.head.removeChild(test)

    if (!cssLoaded) {
        var link = document.createElement("link");

        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = "lib/bootstrap.min.css";

        document.head.appendChild(link);
    }
  </script>
</head>
<body>
    <!-- APP CONTENT -->

    <!-- jQuery CDN -->
    <script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!-- jQuery local fallback -->
    <script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>

    <!-- Bootstrap JS CDN -->
    <script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- Bootstrap JS local fallback -->
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>

Atualizações

Melhores Práticas

Para sua pergunta sobre Boas Práticas, há muitas boas razões para usar uma CDN em um ambiente de produção :

  1. Aumenta o paralelismo disponível.
  2. Aumenta a chance de ocorrer um acerto no cache .
  3. Isso garante que a carga útil seja a menor possível .
  4. Reduz a quantidade de largura de banda usada pelo seu servidor.
  5. Ele garante que o usuário obtenha uma resposta geograficamente próxima .

Para sua preocupação com a versão, qualquer CDN vale seu peso em sal, permitindo que você segmente uma versão específica da biblioteca, para que você não introduza acidentalmente alterações recentes a cada versão.

Usando document.write

De acordo com o MDN em document.write

Nota : à medida que document.writeescreve no fluxo de documentos , a chamada document.writeautomática de um documento fechado (carregado) chama automaticamente document.open, o que limpará o documento .

No entanto, o uso aqui é intencional. O código precisa ser executado antes que o DOM seja totalmente carregado e também na ordem correta. Se o jQuery falhar, precisamos injetá-lo no documento em linha antes de tentarmos carregar o bootstrap, que depende do jQuery.

Saída HTML após o carregamento :

Saída de exemplo

Em ambos os casos, porém, estamos ligando enquanto o documento ainda está aberto, portanto, ele deve alinhar o conteúdo, em vez de substituir o documento inteiro. Se você estiver esperando até o final, precisará substituir por document.body.appendChildpara inserir fontes dinâmicas.

Além : No MVC 6, você pode fazer isso com os auxiliares de tag de link e script

KyleMit
fonte
1
A codificação codificada rgb(51, 51, 51)parece arriscada - e se alguém mudar a cor e esquecer de atualizá-la? Existe uma propriedade mais estável que alguém possa usar?
Flash
@ Flash, Sim, eu concordo que parece mimado. É difícil testar alterações de CSS em variáveis ​​globais de javascript ou diretamente através do CSS. Nós apenas temos que testar elementos para ver se eles foram estilizados da maneira que o CSS provavelmente os descreverá, e sempre teremos um <body>elemento. Esta resposta acrescenta alguma marcação com um .hiddendiv e depois faz um teste para ver se é visível: $('#bootstrapCssTest').is(':visible'). Essa classe provavelmente tem muito menos probabilidade de sofrer alterações ao longo do tempo.
precisa saber é o seguinte
@KyleMit, como posso fazer isso no Google Material Icons ?
Rana Depto
4
Ótima resposta! Apenas uma observação: se você estiver usando o Bootstrap 4, use a classe "d-none" em vez de "oculto" para permitir que o failover funcione.
deste
1
@JarrodW. - ótima pergunta. Eu tive que cavar. que deve ser bom para usá-lo aqui - veja resposta atualizados
KyleMit
9

Depende do site específico.

Você tem muitos usuários? Você se importa com o uso da largura de banda? O desempenho é um problema (as CDNs podem acelerar as respostas)?

Você pode vincular a uma versão específica:

//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

Ou

//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

Dessa forma, você não precisa se preocupar com as atualizações da biblioteca, é uma prática melhor manter-se atualizado.

Não sei ao certo quais são as estatísticas exatas sobre a escolha dos desenvolvedores, mas você pode dar uma olhada aqui e ver Bilhões de solicitações enviadas ao Bootstrap CDN, o que significa que é robusta e segura de usar.

Ofiris
fonte
10
O último link está quebrado.
Nuclearman 03/09/2015
@ Nuclearman, trends.builtwith.com/cdn/StackPath-BootstrapCDN , estou enviando uma edição também.
its4zahoor 11/11/19
2

Tentei editar a resposta do KyleMit, mas o fórum estava marcando como um código recuado errado, mesmo que não fosse, por isso estou adicionando minha contribuição abaixo:

Como a pergunta é marcada como um tópico (e não apenas ), talvez seja útil atualizar a resposta para a versão mais recente do Bootstrap.

Como a estrutura adicionou uma nova classe para ocultar elementos em sua quarta versão, devemos usar em .d-nonevez de .hiddenneste caso.

Tudo o resto permanece o mesmo nesse caso, exceto a versão lib (é claro!)

André Rocha
fonte
1

Graças a @KyleMit. Outra maneira de retroceder é usar o objeto 'window' como abaixo -

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
window.jQuery || document.write("<script src='js/jquery.min.js'><\/script>");
</script>

Funciona assim - Se o link CDN funcionar, o objeto 'window' terá a propriedade 'jQuery' disponível, caso contrário a segunda parte do script, ou seja, document.write será executado, o que aponta para a cópia local.

Resposta à pergunta original - Ter o CDN oferece muitos benefícios, como downloads rápidos, sem afetar o servidor e a largura de banda. Ter uma cópia local tem seu próprio benefício (como um arranjo de reserva). Na intranet, devido a configurações de proxy, políticas de segurança, o link CDN pode não funcionar ou, se o link CDN estiver inativo, pode não funcionar. A resposta direta é ter os dois.

Anand
fonte
1

Quase todas as CDNs públicas são bastante confiáveis. No entanto, se você estiver preocupado com a fração do tempo em que uma CDN pode estar inativa, é possível carregar o Bootstrap de uma CDN do Bootstrap e fazer o fallback para uma CDN alternativa, caso a primeira esteja inativa.

<html>
  <head>
    <!-- Bootstrap CSS CDN with Fallback -->
    <link rel="stylesheet" href="https://pagecdn.io/lib/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous">
    <script>
    var test = document.createElement("div")
    test.className = "hidden d-none"

    document.head.appendChild(test)
    var cssLoaded = window.getComputedStyle(test).display === "none"
    document.head.removeChild(test)

    if (!cssLoaded) {
        var link = document.createElement("link");

        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css";

        document.head.appendChild(link);
    }
    </script>
  </head>
  <body>
    <!-- APP CONTENT -->

    <!-- jQuery CDN with Fallback -->
    <script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');</script>

    <!-- Bootstrap JS CDN with Fallback -->
    <script src="https://pagecdn.io/lib/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"><\/script>')}</script>
  </body>
</html>

Sobre sua segunda preocupação: Os links neste post são versões codificadas do bootstrap e jquery. Portanto, mesmo que as bibliotecas de inicialização e jquery sejam constantemente desenvolvidas e obtenham novos recursos, seu site permanecerá o mesmo ao longo do tempo.

Hamid Sarfraz
fonte