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 :
<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
- você também pode fazer o mesmo teste usando YepNope ou fallback.js
- por comentário do flash e esta solução , atualizados resposta para verificar se há
.visibleclasse em vez de testes parargb(51, 51, 51)
- de acordo com este comentário , atualizado para usar
.hiddene .d-nonepara o Boostrap 3.x ou 4
- ao testar se uma folha de estilo foi carregada , é necessário procurar um estilo que teria sido aplicado, criar um elemento e verificar se ele foi aplicado.
- Atualizada a folha de estilo para carregar imediatamente na cabeça usando vanilla js. Você precisa criar um elemento de teste usando
Document.createElement(), aplicar classes de autoinicialização, usar Window.getComputedStyle()para testar display:nonee, em seguida, inserir condicionalmente uma folha de estilo usando js.
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 :
- Aumenta o paralelismo disponível.
- Aumenta a chance de ocorrer um acerto no cache .
- Isso garante que a carga útil seja a menor possível .
- Reduz a quantidade de largura de banda usada pelo seu servidor.
- 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 :
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
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?<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.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:
Ou
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.
fonte
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 twitter-bootstrap tópico (e não apenas twitter-bootstrap-3 ), 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!)
fonte
Graças a @KyleMit. Outra maneira de retroceder é usar o objeto 'window' como abaixo -
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.
fonte
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.
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.
fonte