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

Question

I am using a js file and it is available in cdn. I also have the same js file in my project as fallback.

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

I have both these code in my html file under head. Can some one tell if js file will be downloaded twice or only once? Is it correct to have both links? Will it still avoid duplicacy based on name?

Issue on how to handle CDN failure on fallback is asked and explained elsewhere. With respect to the scenario explained in the question I was more concerned if it downloads the same library twice (which as per answer is yes) and the reason if yes?

The browser does not know that both URLs refer to files with the same content, so it will try to download *and execute* both. (Whether executing both breaks your code will depend on the code in question, but it's obviously the opposite of the efficiency that CDNs are intended to provide.) — nnnnnn, Feb 16 '17 at 02:55

score 1 · Answer 1 · answered Feb 16 '17 at 02:55

You can use fallback for your 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"));
}

You can read more here: http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

may solve your problem!

score 1 · Accepted Answer · answered Feb 16 '17 at 02:57

Resources are cached by absolute URL. This means that yourdomain.com/file.js will be considered a different file than cdn.somewhere.com/file.js, or even yourdomain.com/file.js?querystring=1.

It will simply download the source code twice and overwrite the previous instance of the same objects in memory. To have a local copy of a resource served via CDN, what I like to do is (using jquery as example)

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

This will check for the existence of the object loaded by the library, and try to load the local copy if it doesn't find it. You can tweak it to work with any library that exposes a global object.

score 0 · Answer 3 · answered Feb 16 '17 at 03:02

You could use a Promise. Just return a promise from a function which checks whether or not the CDN script loads, and if it doesn't, resolve the promise and load the load script:

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

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

3 Answers3