BinaryDevelop
  1. ホーム
  2. twitter-bootstrap

[解決済み] BootstrapはCDNから使うべきか、それとも自分のサーバーにコピーを作るべきか？

2022-04-23 17:22:47

質問

Twitter Bootstrapを使用する際のベストプラクティスは、CDNから参照するか、自分のサーバーにローカルコピーを作成するか、どちらでしょうか？

Bootstrapはどんどん進化していくので、CDNを参照すると、時間の経過とともに異なるWebページが表示されたり、タグが壊れたりするのではないかと心配です。多くの人はどのように選択しているのでしょうか？

解決方法は？

なぜ両方ともダメなのか ¯ Â_(ツ)_/¯ ？ Scott Hanselmanは、CDNを使用してパフォーマンスを向上させながらも、潔く使用することについての素晴らしい記事を掲載しています。 CDNがダウンした場合に備えて、ローカルコピーにフォールバックする。 .

bootstrapに特化すると、以下のようになります。 ローカルフォールバックでCDNから読み込む :

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>

更新情報

ベストプラクティス

ベストプラクティスについてのご質問ですが、多くの種類の CDNを使用する非常に良い理由 本番環境において :

  1. が増えます。 並列性 が利用できます。
  2. る可能性が高まります。 キャッシュヒット .
  3. としてペイロードが確保されます。 できるだけ小さく .
  4. を減らすことができます。 帯域幅 サーバーで使用されます。
  5. それにより、ユーザーが確実に 地理的に近い のレスポンスが得られます。

バージョン管理についてですが、価値のあるCDNであれば、特定のバージョンのライブラリをターゲットにすることができるので、リリースのたびに誤って破壊的な変更を導入することはありません。

使用方法 document.write

のmdnによると document.write

備考 のように document.write は、ドキュメントに書き込みます。 ストリーム を呼び出すと document.write は、閉じた（読み込まれた）ドキュメント上で自動的に document.open , これは、ドキュメントをクリアする .

ただし、ここでの使い方は意図的なものです。 コードはDOMが完全に読み込まれる前に実行される必要があり、また正しい順序で実行される必要があります。 もしjQueryが失敗したら、jQueryに依存しているbootstrapをロードしようとする前に、それをドキュメントにインラインで注入する必要があります。

ロード後のHTML出力 :

しかし、この2つの例では、ドキュメントを開いたまま呼び出しているので、ドキュメント全体を置き換えるのではなく、コンテンツをインライン化する必要があります。 もし最後まで待つのであれば、次のように置き換える必要があります。 document.body.appendChild を使用して動的ソースを挿入します。

<ブロッククオート

脇 : MVC 6 では、次のようにすることができます。 リンクとスクリプトタグのヘルパー

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します