CDN'den Bootstrap kullanmalı mıyım veya sunucumda bir kopya oluşturmalı mıyım?

140

Twitter Bootstrap kullanmanın en iyi yolu nedir, CDN'den bakın veya sunucumda yerel bir kopya oluşturun?

Bootstrap gelişmeye devam ettiğinden, CDN'ye başvurursam korkarım, kullanıcı zaman içinde farklı web sayfaları görür ve hatta bazı etiketler bozulabilir. Çoğu insanın seçimi nedir?

twitter-bootstrap twitter-bootstrap-3

— shapeare
kaynak

204

Neden İkisi de ¯ \ _ (ツ) _ / ¯? Scott Hanselman'ın performans kazanımları için CDN kullanma konusunda harika bir makalesi var, ancak CDN'nin çökmesi durumunda yerel bir kopyaya geri dönüyor .

Bootstrap'e özgü olarak, yerel bir yedeğe sahip bir CDN'den yüklemek için aşağıdakileri yapabilirsiniz :

Plunker'da Çalışma Demosu

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

Güncellemeler

Aynı testi YepNope veya fallback.js kullanarak da yapabilirsiniz
başına Flash'ın yorumun ve bu çözümün , denetlemek cevabını güncellenen .visibleiçin test yerine sınıfınargb(51, 51, 51)
deste'nin yorumu başına , güncellenecek .hiddenve .d-noneBoostrap 3.x veya 4 için
ne zaman bir stil yüklü eğer test , bir stil için bakmak gerekir olurdu , uygulanmış olan bir öğe oluşturmak ve uygulandığı olup olmadığını görmek.
Vanilya js kullanarak hemen kafasına yüklenecek stil sayfasını güncelledi. Kullanarak bir test öğesi oluşturmanız Document.createElement(), bootstrap sınıflarını uygulamanız, Window.getComputedStyle()test etmek için kullanmanız display:noneve ardından js kullanarak bir stil sayfası eklemeniz gerekir .

En İyi Uygulamalar

En İyi Uygulamalar ile ilgili sorunuz için , bir üretim ortamında CDN kullanmak için çok iyi nedenler vardır :

Mevcut paralellikleri artırır .

Önbellek vurma olasılığını artırır .

Yükün mümkün olduğunca küçük olmasını sağlar .

Sunucunuz tarafından kullanılan bant genişliği miktarını azaltır .

Kullanıcının coğrafi olarak yakın bir yanıt almasını sağlar .

Sürüm oluşturma endişeniz için, tuz ile ağırlığına değer herhangi bir CDN, kütüphanenin belirli bir sürümünü hedeflemenize izin verir, böylece her bir sürümle yanlışlıkla kırma değişiklikleri yapmazsınız.

kullanma `document.write`

MDN'ye göre document.write

Not : document.writebelge akışına yazarken , document.writekapalı (yüklü) bir belgeyi çağırmak document.open, belgeyi temizleyecek otomatik olarak arama yapar .

Ancak, burada kullanım kasıtlıdır. DOM tamamen yüklenmeden ve doğru sırada kodun yürütülmesi gerekir. JQuery başarısız olursa, jQuery'ye dayanan bootstrap yüklemeye çalışmadan önce belgeyi satır içine enjekte etmemiz gerekir.

Yükten Sonra HTML Çıkışı :

Yine de bu örneklerin her ikisinde de, belge açıkken çağırıyoruz, böylece belgenin tamamını değiştirmek yerine içeriği satır içinde olmalıdır. Sonuna kadar bekliyorsanız, document.body.appendChilddinamik kaynaklar eklemek için yerine geçmeniz gerekir .

Bir yana : MVC 6'da bunu bağlantı ve komut dosyası etiketi yardımcılarıyla yapabilirsiniz

— KyleMit
kaynak

1

Hardcoding rgb(51, 51, 51)riskli görünüyor - ya bir kişi rengi değiştirir ve güncellemeyi unutursa? Kullanılabilecek daha istikrarlı bir özellik var mı?

— Flash

@Flash, Evet, katılıyorum gibi görünüyor. Global javascript değişkenlerindeki veya doğrudan CSS'deki CSS değişikliklerini test etmek zordur. Öğeleri, CSS'nin bunları tanımlama olasılığına göre şekillendirilip şekillendirilmediğini görmek için test etmemiz gerekiyor ve her zaman bir <body>öğemiz olacak. Bu cevap bir bazı işaretlemesi ekler .hiddendiv ve sonra görünür olup olmadığını görmek için bir test yapar: $('#bootstrapCssTest').is(':visible'). Bu sınıfın muhtemelen zaman içinde kırılma değişikliklerine sahip olma olasılığı daha düşüktür.

— KyleMit

@KyleMit, Google Malzeme Simgeleri için bunu nasıl yapabilirim ?

— Rana Depto

4

Mükemmel cevap! Sadece bir not: Bootstrap 4 kullanıyorsanız, çalışmaların başarısız olmasına izin vermek için "gizli" yerine "d-none" sınıfını kullanmalısınız.

— deste

1

@JarrodW. - harika soru. Biraz kazmak zorunda kaldım. burada kullanmak için iyi olmalı - güncellenmiş cevaba bakınız

— KyleMit

9

Belirli bir siteye bağlıdır.

Çok fazla kullanıcınız var mı? Bant genişliği kullanımını önemsiyor musunuz? Performans bir sorun mu var (CDN'ler yanıtları hızlandırabilir )?

Belirli bir sürüme bağlantı verebilirsiniz:

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

Veya

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

Bu şekilde kütüphane güncellemeleri hakkında endişelenmenize gerek kalmaz, güncel tutulması daha iyi bir uygulamadır.

Geliştiricilerin seçimi hakkında kesin istatistiklerin ne olduğundan emin değilim, ancak buraya bir göz atabilir ve milyarlarca isteğin Bootstrap CDN'ye gönderildiğini görebilirsiniz, bu da sağlam ve kullanımı güvenli olduğu anlamına gelir.

— Ofiris
kaynak

10

Son bağlantı koptu.

— Nükleer Adam

@Nuclearman, trends.builtwith.com/cdn/StackPath-BootstrapCDN , ben de bir Düzenleme gönderiyorum.

— its4zahoor

2

KyleMit'in cevabını düzenlemeye çalıştım, ancak forum yanlış girintili bir kod olarak işaretleniyordu, olmasa bile, bu yüzden katkımı hemen ekliyorum:

Soru şu şekilde etiketlendiğinden: twitter-önyükleme konu (ve sadece heyecan-önyükleme-3 ), belki de Bootstrap'ın daha yeni sürümünün yanıtını güncellemek yararlı olabilir.

Çerçeve, dördüncü sürümünde öğeleri gizlemek için yeni bir sınıf eklediğinden , bu durumda .d-noneyerine kullanmalıyız .hidden.

Bu sürümde, lib sürümü hariç her şey aynı kalır (elbette!)

— André Rocha
kaynak

1

@KyleMit'e teşekkürler. Geri çekilmenin başka bir yolu da 'window' nesnesini under -

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

Snippet'i genişlet

Bu şekilde çalışır - CDN bağlantısı çalışırsa, 'window' nesnesi 'jQuery' özelliğine sahip olur, başka bir komut dosyasının ikinci kısmı yani document.write, yerel kopyaya işaret eder.

Orijinal sorunun cevabı - CDN'ye sahip olmanın sunucunuzu ve bant genişliğinizi etkilemeden hızlı indirmeler gibi birçok faydası vardır. Yerel bir kopyaya sahip olmanın kendi yararı vardır (geri dönüş düzenlemeleri olarak). İntranette proxy ayarları, güvenlik ilkeleri, CDN bağlantısı çalışmayabilir veya CDN bağlantısı kesilmişse çalışmayabilir. Doğru cevap her ikisine de sahip olmaktır.

— Anand
kaynak

1

Neredeyse tüm halka açık CDN'ler oldukça güvenilirdir. Bununla birlikte, bir CDN'nin kapanabileceği zamanın bu bölümünden endişe ediyorsanız, Bootstrap'ı bir Bootstrap CDN'sinden yükleyebilir ve ilkinin çökmesi durumunda alternatif bir CDN'ye geri dönebilirsiniz.

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

İkinci endişeniz hakkında: Bu yazıdaki bağlantılar, bootstrap ve jquery'nin sabit kodlu versiyonlarıdır. Öyleyse, bootstrap ve jquery kütüphaneleri sürekli olarak geliştirilip yeni özellikler alsa bile, siteniz zaman içinde aynı kalacaktır.

— Hamid Sarfraz
kaynak

CDN'den Bootstrap kullanmalı mıyım veya sunucumda bir kopya oluşturmalı mıyım?

Plunker'da Çalışma Demosu

Güncellemeler

En İyi Uygulamalar

kullanma document.write

kullanma `document.write`