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 how that affect on 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 define it is: A simple (proof-of-concept) script loader that caches scripts with localStorage.
mmm, But why localStorage!
As you may know already that localStorage is API used in modern browsers to store data, Google and Bing told us that: There are performance benefits to caching assets in localStorage (especially on mobile) when compared to simply reading and writing from the standard browser cache.
How it work?
So the mean idea, That it request scripts via XHR — which means if you need to test it locally you will need to run it from localserver — then store them in browser’s localStorage and next time page loads scripts, it loads from localStorage directly!
Show me some code!
As you can know from installation guide:
- Clone repository: https://github.com/addyosmani/basket.js.git
- In basket.js folder run “with normal user not with sudo!”: npm install & bower install
- Create HTML page to test basket as following image:
If everything is fine as it should be, you can see script stored in localStorage:
Now, that was sample script to make basket.js work, but there are more options for other needs I will brief the most important 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 files caching? Please, share it in comments.
If you find this post useful, share it and spread the word! ☺
