с использованием cdn и того же файла js в локальном хранилище в качестве резервного файла будет загружать файл дважды или нет?

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 загружаться дважды или только один раз? Правильно ли иметь обе ссылки? Будет ли он по-прежнему избегать дублирования, основанного на имени?

Вопрос о том, как обращаться с отказом CDN при резерве, задается и объясняется в другом месте. Что касается сценария, объясненного в вопросе, я был более обеспокоен тем, что он дважды загружает одну и ту же библиотеку (что соответствует дате) и причина, если да?

Answer 1

Ресурсы кэшируются Абсолютный URL. Это означает, что yourdomain.com/file.js будет считаться другим файлом, чем cdn.somewhere.com/file.js, или даже yourdomain.com/file.js?querystring=1.

Он просто загрузит исходный код дважды и перезапишет предыдущий экземпляр одних и тех же объектов в памяти. Для того, чтобы иметь локальную копию ресурса обслуживаемого через CDN, что я хотел сделать, это (с помощью JQuery в качестве примера)

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

Это будет проверять на существование объекта, загруженный в библиотеке, и попробуйте загрузить если она не найдена. Вы можете настроить его для работы с любой библиотекой, которая предоставляет глобальный объект.

Answer 2

Вы можете использовать запасной вариант для КДС:

<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

Вы можете использовать Promise. Просто вернуть обещание от функции, которая проверяет, является ли или нет нагрузки 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) 
    })