在本地存储库中使用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

您可以使用后备作为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/cdnsfailbutyourscriptsdonthavetfallbackfromcdntolocaljquery.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)
  })