Skip to main content

JavaScript: Basket.js


This article is about one of the common concern for web development
i.e loading time and how it affects on website performance when you need
to load several libraries to your website especially with low internet speed.

So basket.js is one of the solutions for it.
It is a small JavaScript library which loads external JavaScript libraries and also
caches them in local storage, so that on the next page request the external JavaScript does
not have to be requested over the network again, but can simply be loaded from the local storage.
You can also set an expiry time for the cached item.

Let's give a try:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/basket.js/0.5.2/basket.full.min.js"></script>
<script>
basket.require({ url:'https://cdnjs.cloudflare.com/ajax/libs/countable/3.0.1/Countable.min.js',expire: 2 });
</script>
</head>
<body>
<h2>Hello, Please check network tab first and then local storage.</h2>
</body>
</html>

So in this example, we have firstly loaded the basket.js and then using basket.require()
we have loaded countable.js which will be cached in localstorage, that you can check in the application tab of developer console of chrome.
So from the next time, it will fetch countable.js library from localstorage instead over a network.
As we have also set expire time i.e 2 hours.
It will catch only till 2 hours, if the expire parameter is not given then by default it is 5000 hours.
There is a lot to explore about this library like passing multiple scripts, methods like  basket.get(), basket.clear(), and basket.remove().

For more details please check this official documentation.
CDN link: https://cdnjs.cloudflare.com/ajax/libs/basket.js/0.5.2/basket.full.min.js

If you found this article helpful, please share your feedback in the comments section.
Subscribe this blog for more articles on Node.js and JavaScript.
You can also find me on Twitter or Linkedin.

Written By:
Saurabh Joshi

Comments

  1. Saurabh JoshiMay 9, 2020 at 8:10 AM

    Hey Thanks Buddy.

    ReplyDelete
  2. Saurabh JoshiMay 9, 2020 at 10:56 AM

    https://www.npmjs.com/package/basket.js
    Unfortunately it has 33 issues and is not updated for 5 years, and has 7 weekly downloads.

    ReplyDelete
  3. Saurabh JoshiMay 12, 2020 at 6:21 AM

    But still good for wordpress websites.

    ReplyDelete

Post a Comment

Popular posts from this blog

Coding Interview Questions Set 1

From this article, I will be sharing with you all a series of articles on coding interview questions. So please stay connected for the latest set of questions. It will be a good brainstorming exercise and will also prepare you for coding interviews and will definitely boost your confidence. So let's start, 1)Reverse of a string with only O(1) extra memory. Solution: var reverse = function(string) {     let result = ''     for(let i= string.length -1; i >= 0; i--){         result += string[i];     }     return result; }; 2)Fizz Buzz: Write a program that will accept a number n and will output number till n but for multiples of three it should output “Fizz” instead of the number and for the multiples of five output “Buzz”. For numbers which are multiples of both three and five output “FizzBuzz”. Solution: var fizzBuzz= function(n) {     const arr=[]     for(i=1; i<=n; i++){ ...
9 comments
Read more

JavaScript: Debouncing | Flipkart UI Interview Question.

To understand this programming practice will go with a quick example. We all do online shopping and we do search for products on Flipkart on the search bar. So when we type on search bar i.e on every keypress we are actually giving API requests to the server, which in response gives us suggestions. Actually, it's a time-consuming task and may degrade the performance of the webpage. So to improve the performance we use debounce function which actually acts as a controller which reduces the API request to the server on keypress event. In simple terms, we are giving API request only after a certain amount of time between two keypress events. A debounce is a higher-order function. Higher-order function: A function that returns another function. Let's dive deep: HTML Code: <input type="text" onkeyup="searchProducts()"/> Consider this as a search bar for Flipkart. On any keypress, we are calling searchProducts() function. Javascri...
Post a Comment
Read more

Node.js: Bundling your Node.js application to single executable for Windows.

In this article, we will see how to bundle Node.js application to a single executable for Windows. What's the need? Well recently, I had taken a work where I needed to convert pdf's(Of similar format) to excel sheet. So I was reading the pdf's from a folder in desktop and I was storing the output excel sheet into a separate folder on the desktop. I used Node.js for the program. Now the client wanted it to install the program on 25 windows machine and his budget was really low. So it was also not possible for me to install node.js for 25 machines and then install the required dependency for each one. One of the solution: While I was searching for an easy solution I found this amazing npm module pkg . This module can make your node.js app work like plug and play type. No need to install Node.js on the client machine or any other dependency.  It helps to make a commercial or trial version of your node.js application without exposing the source code. I found ...
Post a Comment
Read more