web-dev-qa-db-fra.com

Devrais-je utiliser Bootstrap à partir de CDN ou en faire une copie sur mon serveur?

Quelle est la meilleure pratique d'utiliser Twitter Bootstrap, consultez-le à partir du CDN ou effectuez une copie locale sur mon serveur?

Comme Bootstrap continue d'évoluer, je crains que si je me réfère au CDN, l'utilisateur verra différentes pages Web au fil du temps, et certaines balises pourraient même être endommagées. Quel est le choix de la plupart des gens?

twitter-bootstraptwitter-bootstrap-3
108
shapeare

Pourquoi pas les deux ¯\_ (ツ) _/¯? Scott Hanselman a un excellent article sur l'utilisation d'un CDN pour des gains de performances mais gracieusement retomber sur une copie locale au cas où le CDN est éteint .

Pour amorcer, vous pouvez effectuer les opérations suivantes pour charger 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
* Per Commentaire de Flash et cette solution , réponse mise à jour pour vérifier la classe .visible au lieu de tester la fonction rgb(51, 51, 51)
* Lorsque vérifier si une feuille de style est chargée , vous devez rechercher un style que aurait appliqué, créer un élément et voir s'il a été appliqué.

A votre question sur les meilleures pratiques, il y a beaucoup de très bonnes raisons d'utiliser un CDN dans un environnement de production :

  1. Cela augmente le parallélisme disponible.
  2. Cela augmente les chances qu'il y ait un cache-hit.
  3. Cela garantit que la charge utile sera aussi petite que possible.
  4. Cela réduit la quantité de bande passante utilisée par votre serveur.
  5. Cela garantit que l'utilisateur obtiendra une réponse géographiquement proche.

En ce qui concerne le contrôle de version, tout CDN digne de ce nom vous permet de cibler une version spécifique de la bibliothèque afin de ne pas introduire accidentellement des modifications radicales à chaque version.

169
KyleMit

Dépend du site spécifique.

Avez-vous beaucoup d'utilisateurs? Est-ce que vous vous souciez de l'utilisation de la bande passante? Les performances sont-elles 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

Ainsi, vous n’aurez plus à vous soucier des mises à jour de la bibliothèque, c’est une meilleure pratique de le garder à jour.

Je ne sais pas quelles sont les statistiques exactes sur le choix des développeurs, mais vous pouvez jeter un coup d'œil ici et voir Des milliards de demandes sont envoyées à Bootstrap CDN, ce qui signifie qu'il est robuste et sûr à utiliser.

9
Ofiris

Presque tous les CDN publics sont assez fiables. Cependant, si vous êtes inquiet au sujet de cette fraction du temps où un CDN peut être en panne, vous pouvez charger Bootstrap à partir d'un Bootstrap CDN , et recourir à un autre CDN si le le premier est 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 ce message sont des versions codées en dur de bootstrap et de 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 identique dans le temps.

1
Hamid Sarfraz

J'ai essayé de modifier la réponse de KyleMit , mais le forum était considéré comme un code indenté incorrect, même s'il ne l'était pas. J'ajoute donc ma contribution ci-dessous:

Étant donné que la question est étiquetée en tant que sujet Twitter-bootstrap (et pas seulement Twitter-bootstrap-3 ), il peut être utile de mettre à jour la réponse pour la version plus récente de Bootstrap.

Comme le framework a ajouté une nouvelle classe pour cacher des éléments dans sa quatrième version, nous devrions utiliser .d-none au lieu de .hidden dans ce cas.

Tout le reste reste le même sur ce cas, sauf la version lib (bien sûr!)

1
André Rocha

Merci à @KyleMit. Une autre façon de se replier consiste à utiliser l’objet 'window' comme -

<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 et pointe vers la copie locale. 

Réponse à la question initiale - Avoir un 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 (comme un arrangement de secours). Sur l'intranet, en raison des paramètres de proxy, des stratégies de sécurité, la liaison CDN peut ne pas fonctionner ou si la liaison CDN est hors service, il est possible que cela ne fonctionne pas. La réponse directe est d'avoir les deux.

0
Anand