フォールバックと同じローカル・リポジトリ内のcdnと同じjsファイルを使用してファイルを2回ダウンロードするかどうかを確認します。

Question

私はjsファイルを使用しており、cdnで利用できます。私はまた、フォールバックとして私のプロジェクトで同じjsファイルを持っています。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script> 


<script src="js/3rdPartyLibraries/swiper.min.js"></script> 

これらのコードはいずれも、私のhtmlファイルの下にあります。 jsファイルが2回だけダウンロードされるか、1回のみダウンロードされるかは、 両方のリンクを持つのは正しいですか？名前に基づいて重複を避けることはできますか？

フォールバック時にCDN障害を処理する方法については、別の場所で説明されています。質問で説明されているシナリオに関しては、同じライブラリを2回（答えが「はい」）と「はい」の場合にダウンロードすると、私はより心配でしたか？

Answer 1

リソースは絶対URLでキャッシュされます。つまり、yourdomain.com/file.jsはcdn.somewhere.com/file.jsと異なるファイル、またはyourdomain.com/file.js?querystring=1と見なされます。

単純にソースコードを2回ダウンロードし、メモリ内の同じオブジェクトの前のインスタンスを上書きします。私がやりたいものをCDNを介して提供するリソースのローカルコピーを持っている

<script type="text/javascript" src="http://cdn.jquery.com/whatever/jquery.js"></script> 
<script type="text/javascript"> 
    if (!window.jQuery) { 
     document.write('<script type="text/javascript" src="your/local/copy/of/jquery.js"></script>'); 
    } 
</script> 

これは、ライブラリによってロードされたオブジェクトが存在するかどうかを確認し、ロードしようとします（例としてjqueryのを使用して）されますローカルコピーが見つからない場合グローバルオブジェクトを公開する任意のライブラリで動作するように調整することができます。

Answer 2

あなたのCDNのためのフォールバックを使用することができます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script> 

if (typeof Swiper === 'undefined') { 
    document.write(unescape("%3Cscript src='js/3rdPartyLibraries/swiper.min.js' type='text/javascript'%3E%3C/script%3E")); 
} 

あなたがここで詳細を読むことができます：http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

あなたの問題を解決することがあります！

Answer 3

プロミスを使用することができます。ただ、CDNスクリプト負荷かどうかをチェックする機能からの約束を返し、そうでない場合は、約束を解決し、負荷スクリプトを読み込む：

ブラウザが知らない

function loadScript() { 
    return new Promise((resolve, reject) => { 
     var script = document.getElementById('script--cdn') 
     oScript.onerror =() => resolve() 
     oScript.onload =() => reject() 
    } 
    } 

    loadScript().then(() => { 
    var localScript = document.createElement('script') 
    localScript.src = 'js/3rdPartyLibraries/swiper.min.js' 
    document.body.appendChild(localScript) 
    })