utils.scache.js

The goal of SCache is to load the JS/CSS files once and then use localStorage API to retrieve those files quickly without any server calls. That not only optimizes the application performance but also reduces HTTP footprint.

Responsive image

Code

Action

var $result = $('#scache1-result'); new UTILS.SCache({ scripts:[ 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js', 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.fp.js' ], onLoaded: function(){ $result.html('scripts loaded...'); //do some magic... } });

Open your Dev Tools console to see the progress.

The first time you click on the link you will see the scripts being loaded from their respective locations that will take a few seconds to complete.
The second time you will click on the load files link most likely you will not see any loading message and no server calls. The scripts will have been deposited in your browser's local storage and will be loaded from there.

Pay attention to the millis next to each script to see how quickly it gets loaded.

var $result = $('#scache2-result'); new UTILS.SCache({ scripts:[ 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js?^nocache=true', 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.fp.js?^nocache=true' ], onLoaded: function(){ $result.html('scripts loaded...'); //do some magic... } });

By appending ^nocache=true to the end of each script renders them uncachable. In other words they will be downloaded every time anew.

var $result = $('#scache3-result'); new UTILS.SCache({ scripts:[ 'https://www.google.com/jsapi?^type=js' //=> "js" or "css" ], onLoaded: function(){ $result.html('scripts loaded...'); //do some magic... } });

By appending ^type=js or ^type=css to the end of each script tells the loader how to retrieve the assets.

All internal params such as ^type or ^nocache will be stripped out before the call to the resource is made.

API

Option

Required

Default

Description

scripts required []

Scripts that need to be loaded either through HTTP request or from local cache.

All requests to scripts containing http in the path will be done via
http://cors-anywhere.herokuapp.com/ to make sure CORS headers are set.

Methods

Method

Default

Repeat

Description

onLoaded null REPEAT Triggered when all the scripts have finished loading
onError null REPEAT Triggered when any of the scripts failed loading

Use case #1 ( Load application-level scripts per page )

Inside the <head> tag

Whether using webpack/grunt/gulp to load pre-compiled scripts or no framework at all we need to load that certain set to scripts for a specific page. We can rely purely on browser caching to help us with performance... Or in addition we can use a high performance strategy to load those scripts only once on the initial page load and then simply grab them from local storage on subsequent page loads and increase the perforance X-fold.

//including the scache file //setting some promises that we will use to know when all the scripts/bundles have been loaded var scache; var _onScriptsLoadedResolve; var _onScriptsLoadedReject; var onScriptsLoaded = new Promise(function(resolve,reject){ _onScriptsLoadedResolve = resolve; _onScriptsLoadedReject = reject; }); //loading scripts scache = new UTILS.SCache({ scripts:[ '/js/jquery.js?v='+scache_version, '/js/script1.js?v='+scache_version, '/js/script2.js?v='+scache_version ], onLoaded: function(){ console.log('scache --> scripts loaded'); _onScriptsLoadedResolve(); } }); //somewhere in the page we need to know when everything is loaded onScriptsLoaded.then(function(){ //now all scripts have loaded $(function(){ //lets do some magic... }); });

Gruntfile.js

Every time JS/CSS files get deployed to production, we can update the the scache_version to force the browser to clear the localStorage and reload all content

//loading the task grunt.loadNpmTasks('grunt-execute'); //running the task execute: { updateScacheVersion: { call: function(grunt, options){ var fs = require('fs'); fs.writeFile('/.../scache.version.js', 'var scache_version='+Math.round(+new Date()/1000)+';', function(err){ if (err) return console.log(err); console.log('version written!'); }); } } } //=> var scache_version = 1522096634;
Loading resources, please wait...