Dois-je utiliser Bootstrap à partir du CDN ou faire une copie sur mon serveur?
Quelle est la meilleure pratique d'utiliser Twitter Bootstrap, de s'y référer à partir du CDN ou de faire une copie locale sur mon serveur?
depuis Bootstrap continue d'évoluer, je crains que si je me réfère au CDN, l'utilisateur verrait différentes pages Web au fil du temps, et certaines étiquettes peuvent même se casser. Quel est le choix de la plupart des gens?
4 réponses
Scott Hanselman a un excellent article sur l'utilisation D'un CDN pour les gains de performance, mais gracieusement en revenant à une copie locale dans le cas où le CDN est en baisse .
spécifique à bootstrap, vous pouvez faire ce qui suit à charge à partir D'un CDN avec un repli local :
<head>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- jQuery local fallback -->
<script>window.jQuery || document.write('<script src="/local/jquery.min.js"><\/script>')</script>
<!-- Bootstrap JS CDN -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="/local/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap CSS local fallback -->
<div id="bootstrapCssTest" class="hidden"></div>
<script>
$(function() {
if ($('#bootstrapCssTest').is(':visible')) {
$("head").prepend('<link rel="stylesheet" href="/local/bootstrap.min.css">');
}
});
</script>
</body>
* vous pouvez également faire le même test en utilisant YepNope ou fallback.js
* par commentaire de Flash et cette solution , réponse mise à jour de vérifier pour la classe .visible au lieu de tester pour rgb(51, 51, 51)
"
* lorsque test si une feuille de style chargée , vous devez chercher un style qui aurait ont été appliquées, créer un élément, et voir si elle a été appliquée.
à votre question sur les meilleures pratiques, il y a beaucoup de très bonnes raisons d'utiliser un CDN dans un environnement de production :
- il augmente le parallélisme disponible.
- il augmente la chance qu'il y aura un cache-hit .
- il assure que le charge utile sera aussi petit que possible .
- il réduit la quantité de largeur de bande utilisée par votre serveur.
- il garantit que l'utilisateur obtiendra une réponse géographiquement proche .
pour votre souci de versioning, tout CDN valant son poids en sel vous permet de cibler une version spécifique de la bibliothèque afin de ne pas accidentellement introduisez des changements de rupture à chaque version.
dépend du site spécifique.
avez-vous beaucoup d'utilisateurs? Vous souciez-vous de l'utilisation de la bande passante? Est-ce que la performance est un problème (CDN peut accélérer les réponses) ?
vous pouvez créer un lien vers une version spécifique:
/ /maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
ou
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
de cette façon, vous n'avez pas à vous soucier des mises à jour des bibliothèques, c'est une meilleure pratique à garder à jour.
Je ne suis pas sûr de quelles sont les statistiques exactes sur le choix des développeurs, mais vous pouvez avoir un regard ici et voir des milliards de requêtes sont envoyées à Bootstrap CDN, ce qui signifie qu'il est robuste et sûr à utiliser.
j'ai essayé d'éditer la réponse de KyleMit mais le forum était en train de marquer comme un code indenté erroné, même si ce n'était pas, donc j'ajoute ma contribution juste ci-dessous:
comme la question est étiquetée comme un sujet twitter-bootstrap (et pas seulement twitter-bootstrap-3 ), peut-être qu'il est utile de mettre à jour la réponse pour la nouvelle version de Bootstrap.
comme le cadre a ajouté un nouveau classe pour cacher des éléments sur sa quatrième version, nous devrions utiliser .d-none au lieu de .hidden dans ce cas.
tout reste le même sur cette affaire, sauf la version lib (bien sûr!)
Bienvenue Bootstrap 4.1 CA:
/ /stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css