it-swarm.com.de

Sollte ich Bootstrap von CDN verwenden oder eine Kopie auf meinem Server erstellen?

Was ist die beste Methode, um Twitter Bootstrap zu verwenden, von CDN darauf zu verweisen oder eine lokale Kopie auf meinem Server zu erstellen?

Da Bootstrap sich ständig weiterentwickelt, habe ich Angst, wenn ich auf das CDN verweise, der Benutzer würde im Laufe der Zeit verschiedene Webseiten sehen und einige Tags könnten sogar defekt sein. Welche Wahl haben die meisten?

108
shapeare

Warum nicht beide? ¯\_ (ツ) _/¯? Scott Hanselman hat einen großartigen Artikel über die Verwendung eines CDN für Leistungssteigerungen aber anmutig auf eine lokale Kopie zurückgreifen, falls die CDN nicht funktioniert .

Speziell für Bootstrap können Sie Folgendes tun, um von einem CDN mit einem lokalen Fallback zu laden:

Arbeitsdemo in Plunker

<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>

Aktualisierung

Empfohlene Vorgehensweise

Zu Ihrer Frage zu Best Practices gibt es viele sehr gute Gründe, eine CDN in einer Produktionsumgebung zu verwenden :

  1. Es erhöht die Parallelität zur Verfügung.
  2. Dies erhöht die Wahrscheinlichkeit, dass ein Cache-Treffer auftritt.
  3. Es stellt sicher, dass die Nutzlast so klein wie möglich ist .
  4. Dies verringert die Menge an Bandbreite , die von Ihrem Server verwendet wird.
  5. Es stellt sicher, dass der Benutzer eine geografisch nahe Antwort erhält.

Für Ihre Versionsangelegenheiten können Sie mit jedem CDN, das sein Gewicht in Salz wert ist, auf eine bestimmte Version der Bibliothek abzielen, damit Sie nicht versehentlich mit jeder Veröffentlichung aktuelle Änderungen einführen.

Verwenden von document.write

Laut mdn auf document.write

Hinweis : Wenn document.write In das Dokument schreibt stream , wird document.write Bei einem geschlossenen ( Dokument geladen) ruft automatisch document.openauf, wodurch das Dokument gelöscht wird .

Die Verwendung hier ist jedoch beabsichtigt. Der Code muss ausgeführt werden, bevor das DOM vollständig geladen ist und auch in der richtigen Reihenfolge. Wenn jQuery fehlschlägt, müssen wir es inline in das Dokument einfügen, bevor wir versuchen, den Bootstrap zu laden, der auf jQuery basiert.

HTML-Ausgabe nach dem Laden:

Example Output

In beiden Fällen rufen wir jedoch auf, während das Dokument noch geöffnet ist, damit es den Inhalt einfügt, anstatt das gesamte Dokument zu ersetzen. Wenn Sie bis zum Ende warten, müssen Sie durch document.body.appendChild Ersetzen, um dynamische Quellen einzufügen.

191
KyleMit

Abhängig von der jeweiligen Site.

Haben Sie viele Benutzer? Interessieren Sie sich für die Bandbreitennutzung? Ist die Leistung ein Problem (CDNs kann beschleunigen die Antworten)?

Sie können auf eine bestimmte Version verlinken:

//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

Oder

//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

Auf diese Weise müssen Sie sich nicht um Bibliotheksaktualisierungen kümmern, es ist eine bessere Vorgehensweise, um auf dem neuesten Stand zu bleiben.

Ich bin nicht sicher, was die exakten Statistiken für Entwickler sind, aber Sie können hier ansehen und sehen, dass Milliarden von Anforderungen an Bootstrap CDN gesendet werden, was bedeutet, dass es robust und sicher ist.

9
Ofiris

Fast alle öffentlichen CDNs sind ziemlich zuverlässig. Wenn Sie sich jedoch Sorgen über den Bruchteil der Zeit machen, in der ein CDN ausfallen könnte, können Sie Bootstrap von einem Bootstrap CDN laden und auf ein alternatives CDN zurückgreifen, falls das Der erste ist ausgefallen.

<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>

Über Ihr zweites Anliegen: Die Links in diesem Beitrag sind fest codierte Versionen von bootstrap und jquery. Selbst wenn die Bibliotheken bootstrap und jquery ständig weiterentwickelt werden und neue Funktionen erhalten, bleibt Ihre Site im Laufe der Zeit gleich.

1
Hamid Sarfraz

Ich habe versucht, die Antwort von KyleMit zu bearbeiten aber das Forum wurde als falsch eingerückter Code markiert, auch wenn es nicht der Fall war. Ich füge also meinen Beitrag rechts unten hinzu:

Da die Frage als Twitter-bootstrap - Thema (und nicht nur Twitter-bootstrap-3 ) markiert ist, ist es möglicherweise hilfreich, die Antwort für die neuere Version von Bootstrap zu aktualisieren.

Da das Framework in der vierten Version eine neue Klasse zum Ausblenden von Elementen hinzugefügt hat, sollten wir in diesem Fall .d-none anstelle von .hidden verwenden.

Alles andere bleibt in diesem Fall gleich, mit Ausnahme der lib-Version (natürlich!)

1
André Rocha

Danke an @KyleMit. Eine andere Möglichkeit des Rückfalls besteht in der Verwendung eines "Fenster" -Objekts als unter -

<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>

Dies funktioniert folgendermaßen: Wenn der CDN-Link funktioniert, hat das 'window'-Objekt die' jQuery'-Eigenschaft zur Verfügung. Andernfalls wird der zweite Teil des Skripts ausgeführt, d. H. Document.write wird ausgeführt, was auf die lokale Kopie verweist. 

Antwort auf die ursprüngliche Frage - CDN hat viele Vorteile, wie z. B. schnelle Downloads, ohne dass der Server und die Bandbreite beeinträchtigt werden. Eine lokale Kopie hat einen eigenen Nutzen (als Rückfallregelung). Aufgrund von Proxy-Einstellungen und Sicherheitsrichtlinien funktioniert die CDN-Verknüpfung im Intranet möglicherweise nicht oder wenn die CDN-Verbindung nicht verfügbar ist, funktioniert sie möglicherweise nicht. Die direkte Antwort lautet, beide zu haben.

0
Anand