Basket.js: Script loader that caches scripts in localStorage
One of the common concerns I faced in web/frontend development is libraries like “Angularjs, Bootstrap, JQuery… etc..” loading time, and do how they affect website performance when you need to load several libraries to your website/page.. especially with low internet speed connections.
There are many solutions for compressing files and caching from both backend and frontend sides.
However, I found a new promising idea — basket.js- I wanted to share with you, so let’s explore it! Moreover, asking, Why it can be a good solution for loading JavaScript and CSS libraries.
What is basket.js?
basket.js as the development team defines it: A simple (proof-of-concept) script loader that caches scripts with localStorage.
Mmm, But why localStorage?
As you might know that localStorage is an API used in modern browsers to store data.
Google recommended it due to performance benefits to caching content (especially on mobile) compared to simply reading and writing from the standard browser cache.
How does it work?
So the main idea is that it requests scripts via XHR — which means if you need to test it localy you will need to run it on localserver, then store them in the browser’s localStorage, then when the page loads scripts, it will load them from localStorage directly!
Show me some code!
According to the installation guide:
Clone repository: https://github.com/addyosmani/basket.js.git
In the basket.js folder, run “with normal user not with sudo!”: npm install & bower install
Create HTML page to test basket as the following image:
If everything is fine as it should be, you can see the script stored in localStorage:
Now, that was a simple script to make basket.js work, but there are more options for other needs. I will brief here the most essential options for my daily work — also,, you can read more documentation here — :
URL: field which I used in the previous demo and that is required.
EXPIRE: expire time in hours:
basket.require({ url: ‘jquery.min.js’, expire: 24})EXECUTE: by default,, it is true, but you can set it to false in some cases.
Now, what do you think about it? Do you have any better ideas about static file caching? Please, share it in a comment!
If you find this post helpful, share it and spread the word! :)