로컬 저장소에서 cdn과 동일한 js 파일을 사용하여 대체 파일을 두 번 다운로드 할 예정입니까?

Question

js 파일을 사용하고 있으며 cdn에서 사용할 수 있습니다. 나는 또한 나의 프로젝트에서 fallback과 같은 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 파일을 두 번 다운로드 할 것인지 아니면 한 번만 다운로드 할 것인지 알 수 있습니까? 두 링크가 모두 맞습니까? 이름을 기반으로 중복성을 피할 수 있습니까?

폴백시 CDN 오류를 처리하는 방법에 대한 문제는 다른 곳에서 묻고 설명합니다. 질문에서 설명한 시나리오와 관련하여 동일한 라이브러리를 두 번 다운로드하면 (예 : 대답은 '예'), 그렇다면 그 이유는 무엇입니까?

Answer 1

리소스는 에 의해 캐시되고 절대 URL은입니다. 즉 yourdomain.com/file.js은 cdn.somewhere.com/file.js 또는 심지어 yourdomain.com/file.js?querystring=1이 아닌 다른 파일로 간주됩니다.

소스 코드를 두 번 다운로드하고 메모리에있는 동일한 개체의 이전 인스턴스를 덮어 씁니다. 내가 뭘하려는 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) 
    })