Quelle est la meilleure pratique pour utiliser Twitter Bootstrap, y faire référence à partir du CDN ou en faire une copie locale sur mon serveur?
Puisque Bootstrap continue d'évoluer, j'ai peur que si je fais référence au CDN, l'utilisateur verrait différentes pages Web au fil du temps, et certaines balises pourraient même être brisées. Quel est le choix de la plupart des gens?
Réponses:
Pourquoi pas les deux ¯ \ _ (ツ) _ / ¯? Scott Hanselman a un excellent article sur l'utilisation d'un CDN pour des gains de performances, mais revenant gracieusement à une copie locale au cas où le CDN serait en panne .
Spécifique au bootstrap, vous pouvez effectuer les opérations suivantes pour charger à partir d'un CDN avec une solution de secours locale :
<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>.visibleclasse au lieu de tester pourrgb(51, 51, 51) .hiddenet .d-nonepour Boostrap 3.x ou 4 Document.createElement(), appliquer des classes bootstrap, utiliser Window.getComputedStyle()pour tester display:none, puis insérer conditionnellement une feuille de style à l' aide de js.Pour répondre à votre question sur les bonnes pratiques, il existe de nombreuses très bonnes raisons d'utiliser un CDN dans un environnement de production :
- Cela augmente le parallélisme disponible.
- Cela augmente les chances qu'il y ait un coup de cache .
- Cela garantit que la charge utile sera aussi petite que possible .
- Cela réduit la quantité de bande passante utilisée par votre serveur.
- Il garantit que l'utilisateur obtiendra une réponse géographiquement proche .
Pour votre problème de version, tout CDN qui vaut son pesant de sel avec vous permet de cibler une version spécifique de la bibliothèque afin de ne pas introduire accidentellement des changements de rupture avec chaque version.
document.writeSelon le MDN sur document.write
Remarque : lors de l'
document.writeécriture dans le flux de documents , l'appeldocument.writed'un document fermé (chargé) appelle automatiquementdocument.open, ce qui effacera le document .
Cependant, l'utilisation ici est intentionnelle. Le code doit être exécuté avant le chargement complet du DOM et également dans le bon ordre. Si jQuery échoue, nous devons l'injecter dans le document en ligne avant d'essayer de charger bootstrap, qui repose sur jQuery.
Sortie HTML après chargement :
Dans ces deux cas cependant, nous appelons alors que le document est encore ouvert, il doit donc intégrer le contenu, plutôt que de remplacer le document entier. Si vous attendez la fin, vous devrez remplacer par document.body.appendChildpour insérer des sources dynamiques.
En plus : dans MVC 6, vous pouvez le faire avec des assistants de lien et de balise de script
<body>élément. Cette réponse ajoute quelques balises avec un .hiddendiv et puis fait un test pour voir si elle est visible: $('#bootstrapCssTest').is(':visible'). Cette classe est probablement beaucoup moins susceptible d'avoir des changements de rupture avec le temps.
Dépend du site spécifique.
Avez-vous de nombreux utilisateurs? Vous souciez-vous de l'utilisation de la bande passante? La performance est-elle un problème (les CDN peuvent 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 de la bibliothèque, il est préférable de rester à jour.
Je ne sais pas quelles sont les statistiques exactes sur le choix des développeurs, mais vous pouvez jeter un œil ici et voir des milliards de demandes sont envoyées à Bootstrap CDN, ce qui signifie qu'il est robuste et sûr à utiliser.
J'ai essayé de modifier la réponse de KyleMit mais le forum marquait comme un mauvais code en retrait, même si ce n'était pas le cas, donc j'ajoute ma contribution juste en dessous:
Comme la question est étiquetée comme un twitter-bootstrap sujet (et pas seulement twitter-bootstrap-3 ), il est peut-être utile de mettre à jour la réponse de la nouvelle version de Bootstrap.
Comme le framework a ajouté une nouvelle classe pour masquer des éléments sur sa quatrième version, nous devrions utiliser à la .d-noneplace de .hiddendans ce cas.
Tout le reste reste le même dans ce cas, sauf la version lib (bien sûr!)
Merci à @KyleMit. Une autre façon de se replier est d'utiliser l'objet 'window' comme sous -
<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>Cela fonctionne comme ceci - Si le lien CDN fonctionne, l'objet 'window' aura la propriété 'jQuery' disponible, sinon la deuxième partie du script, c'est-à-dire document.write sera exécutée qui pointe vers la copie locale.
Réponse à la question initiale - Avoir CDN présente de nombreux avantages tels que des téléchargements rapides sans impact sur votre serveur et votre bande passante. Avoir une copie locale a son propre avantage (en tant qu'arrangements de secours). Sur l'intranet, en raison des paramètres de proxy, des politiques de sécurité, la liaison CDN peut ne pas fonctionner ou si la liaison CDN est en panne, elle peut ne pas fonctionner. La réponse directe est d'avoir les deux.
Presque tous les CDN publics sont assez fiables. Cependant, si vous vous inquiétez de cette fraction du temps où un CDN pourrait être en panne, vous pouvez charger Bootstrap à partir d'un CDN Bootstrap et revenir sur un CDN alternatif au cas où le premier serait en panne.
<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>À propos de votre deuxième préoccupation: les liens dans cet article sont des versions codées en dur de bootstrap et jquery. Ainsi, même si les bibliothèques bootstrap et jquery sont constamment développées et bénéficient de nouvelles fonctionnalités, votre site restera le même au fil du temps.
rgb(51, 51, 51)semble risqué - que faire si quelqu'un change la couleur et oublie de la mettre à jour? Y a-t-il une propriété plus stable que l'on pourrait utiliser?