DayJS: How 2kb date utility library taking over momentjs legacy in 2024

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 does your job. In this article, I will compare momentjs vs dayjs in many aspects. And tell you how and when dayjs is a better alternative to momentjs.

A few days back I was optimizing the size of one of my old react projects, and 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, and even it may not be popular as as momentjs. So no one dares to think anything beyond momentjs. But there are reasons why 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 the 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 which 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 material-UI.
So the question is, is it worth it? Is it doing that much work that I pay more than 130 kBs? Some applications only need to format the date while some application shows the time to the current time, like showing the timing of some events, is it being tomorrow, today or 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) wants to load the application faster, I have applied many tactics to do so, 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 on tackling 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 resemble 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 at the things yourself.

momentJS vs DayJS?

You may also like: Day JS CDN for free

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 functions for both in their corresponding projects and minimal is just 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 depending 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, the 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 many functions you use in your code from both 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 seen that dayjs took around half of the time of momentjs for the same function.

Conclusion

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