DayJS: The best lightweight alternative to momentjs

If you're reading this article, it means you've come out of a phase where you've started to look at the size of the package instead of installing it just because it is popular and do your job. In this article, I will compare momentjs vs dayjs in many aspects. And tell you how and when dayjs is better and when momentjs.

A few days back I was optimizing the size of one of my old react projects, I saw moment import which I don't use nowadays, so I decided to write an article on this showing why you should consider dayjs shouldn't use momentjs just because you want to show date as 9 March, 20 instead of 09/03/2020.

 Why momentjs first of all? - Master of Time

MomentJS is one of the most popular and oldest date-related libraries. It has around 43k GitHub stars and is being used by around 1.3m GitHub repositories. It is most popular because of its rich and simple APIs for date and time formatting and manipulation and multi-platform compatibility and if anyone needs date/time formatting or manipulation, momentjs come first in mind. Maybe that is one of the reasons why everyone prefers momentjs in the first place, even in my company, they prefer momentjs as there's no alternative with such sweet APIs exist, and even exist it may not be popular as much as momentjs. So no one dares to think anything beyond momentjs. But there are reasons when one has to consider and look beyond. In the next section, let's see why momentjs became the point of debate and how the need for some alternative felt.

Why one shouldn't use momentJS then?

It's a trade-off, with such great features comes great cost.

I'm using VSCode Import Cost extension to check the import cost of each library, and it is showing 136 KBs, which is the most expensive library I'm using right now, much more than MaterialUI that costs me 80 kBs. While the material-UI is the most used package. In every jsx/tsx file, you'll see at least one import from marterial-UI.
So the question is, is it worth it? Is it doing that much work that I pay more than 130 kBs? Like some applications only needs to format the date while some application shows the time with respect to the current time, like showing the timing of some events, is it being tomorrow, today or is past, some bar is closed or when closing, etc. And some cases may also involve the timezone, which is a headache on its own. The answer depends on application to application, and mostly we format the date, and a bit less frequently we do date manipulation.

So for only these work, > 130 kBs is not a good deal, especially when your application is SEO demanding, everyone (me too) want to load the application faster, I have applied many tactics to do, and while optimizing the package size of my application, 130+ kBs caught my eyes. This has to be fixed.

If not momentJS then what alternative?

I came to know about a library that mainly focused to tackle exactly the same issue that I mentioned above, named DayJS. The first two lines on their official documentation are

DayJS
2kB JavaScript date utility library

They say,

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

DayJS becoming popular with 25.6k GitHub stars surpassing date-fns with 21.2k stars. I haven't used date-fns, so here I can't compare both. But of course some time. It is not only the size that makes it my choice, but also the APIs, that resembles momentjs. So it will be a very little pain for me to move from momentjs to dayjs. But just before moving, I made some comparisons for sizes and performance, as everyone says it is the best lib package in their documentation, but the reality comes when you start looking in the things yourself.

momentJS vs DayJS?

So, for comparing momentJS with dayJS, I create three react projects using the command npx create-react-app with names dayjs-example and momentjs-example and minimal. dayjs-example is to test dayjs, and so on. minimal is just the empty boilerplate for reference to the other two projects.

1. import cost

   I added import statements in the App.js created by React CLI boilerplate and just called format function for both in their corresponding projects and minimal is just the boilerplate, to compare how much each library causing the increase in size. 

   Import costs for dayJS showed 7.2K (gzipped: 3K) and for momentJS, it showed 130.6K (gzipped: 48K). Here they show a huge difference, but these are just import costs, it may differ at the time of building depends on how each library has implemented imports and working of webpack according to the functions used in our code.

2. Bundle Size

   Now next I just built all of the three projects to check how much they differ in the bundle size. And here is the result I got.

   DayJS

   42.3 KB  2.1807f41e.chunk.js
   778 B    runtime-main.950151df.js
   633 B    main.1cb3d8cc.chunk.js
   556 B    main.d1b05096.chunk.css

   MomentJS

   56.24 KB  2.891328c7.chunk.js
   783 B     runtime-main.5092e59c.js
   635 B     main.c2cbbad2.chunk.js
   556 B     main.d1b05096.chunk.css

   Minimal Project (without any external library aside from boilerplate)

   39.84 KB  2.917d530d.chunk.js
   768 B     runtime-main.bd245a24.js
   608 B     main.a5ca775c.chunk.js
   556 B     main.d1b05096.chunk.css

   So here, moment caused an increase of approx 16.4K and dayjs caused 2.46K which is a huge difference again. Momentjs caused around 8 times more size than the dayjs. It may vary on how much functions you use in your code from both the libraries.

3. Performance

   Now, I'll show my results of testing the format functions for both momentjs and dayjs. I installed both momentjs and dayjs in my minimal project (size comparison is done). I wrote the following chunk of code in App.js function

   useEffect(() => {
   console.time('1');
   moment().format('DD-MM-YYYY');
   console.timeEnd('1');
   
   console.time('2');
   dayjs().format('DD-MM-YYYY');
   console.timeEnd('2');
   
   }, []);​

   and the output of the following results as follows

   1: 2.2763671875ms
   2: 1.260986328125ms​

   so it is clearly seen that dayjs took around half of the time of momentjs for the same function.

Conclusion

Now, the conclusion of the article is
dayjs is the lightweight alternative to
momentjs. BUT again, dayjs can't replace momentjs
completely, or we can say hasn't replaced yet. Momentjs offers a lot of other
things like timezone, which is not supported by dayjs yet. dayjs is a
good replacement of momentjs for basic date transformations,
display, formatting, and so on. So it's all upon your requirements.
Thank
you for reading. I hope you enjoyed it, if I missed anything or has any
mistake in the comparison of both libraries, please let me
know

The article DayJS: The best lightweight alternative to momentjs was originally published on Garbage Value