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

您可以为您的 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 2

资源按绝对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 3

您可以使用 Promise。只是 return 来自检查 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)
  })

在本地存储库中使用 cdn 和相同的 js 文件作为回退会下载文件两次吗？

using cdn and same js file in local repository as fallback will download the file twice or not?

javascript

cdn