Devo usar o Bootstrap da CDN ou fazer uma cópia no meu servidor?
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
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
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​.create​Element(), aplicar classes de autoinicialização, usar Window​.get​Computed​Style()para testar display:nonee, em seguida, inserir condicionalmente uma folha de estilo usando js.
Para sua pergunta sobre Boas Práticas, há muitas boas razões para usar uma CDN em um ambiente de produção :
Aumenta a chance de ocorrer um acerto no cache .
Isso garante que a carga útil seja a menor possível .
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
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, 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.
@KyleMit, como posso fazer isso no Google Material Icons ?
— Rana Depto
Ó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
@JarrodW. - ótima pergunta. Eu tive que cavar. que deve ser bom para usá-lo aqui - veja resposta atualizados
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:
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
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
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!)
— André Rocha
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.
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.