script.js icon indicating copy to clipboard operation
script.js copied to clipboard

Implementation tips for pre-fetching support?

Open fatso83 opened this issue 9 years ago • 0 comments

The current dependency management works great, but I was a bit disappointed when I saw that $script.js only fetches the dependencies lazily. In order to get my uncached page to speed up I now have a little prologue consisting of

// do prefetch of dependencies - without evaluating
// this way the network response are already cached when needed
[mainScript, reactRouter, bootstrapUri].forEach(function (uri) {
    var l = document.createElement('link');
    l.rel = 'prefetch';
    l.href = uri;
    document.head.appendChild(l)
});       
$script(reactUri, function(){
     $script(reactRouterUri, function(){     
            $script(mainScript, function(){  ...   });
     });
});

On high-latency networks (Heroku in my case) this prefetching has a huge impact, cutting the download time from 2 sec to 400ms in total. I was thinking of implementing support for this, but as it seems the actual dependency graph is effectively calculated while running (callbacks), not pre-calculated, I cannot come up with a clean way to do this. Of course I could stringify the functions (ugh!) looking for the right stuff, but that is ugly and would likely contribute immensely to the size of the loader. Any tips you could think of on how to achieve this?

Was thinking of an interface looking something like $script({'//cdnjs.com/script.js', prefetch : true})

fatso83 avatar Apr 13 '15 14:04 fatso83