Wait a Moment.js!

Ahhh, date and time. It’s such a fun thing to deal with during development. In situations when we need more than what the Date object can offer us in terms of convenience, we turn to date wrapping libraries such as Moment.js.

Moment.js is a JavaScript library designed to work on both the client side (in browser), and the server side (in Node.js). It has a lot of functions to parse, display and manipulate dates. This makes dealing with dates less painful.

I would agree it makes things less painful, but let’s take a look at what happens in the source code. Let’s say hypothetically that I have to work out how many days there are between my birthday and the last day of the tax year in the UK.

Let’s use Moment.js to do this. Consider the following code:

Moment example

There are 166 days between the last day of tax year and my birthday

Okay great, we now have the count in days. Simple stuff, and a very convenient method from moment. So what is happening during the execution for this result to be obtained?

Please note: I am profiling a production build of my application and it’s being viewed in incognito mode.

Photo by Fabian Grohs on Unsplash

Okay well first off, my main bundle is a total of 66KB. Moment is 51KB of that, 77% of my bundle. The library is pulling in around 4500 lines of code. Using the JavaScript Profiler in the Chrome Developer Tools, I could see 23 functions were invoked in the moment source code for the 3 functions I used in my example.

If I created a single Moment object for the last day of the tax year, a total of 18 functions are called. 5ms was recorded by aggregating all of the function calls on a slow 3G connection.

The internal functions of moment that took the longest were:

1. createFromConfig (0.9ms)
2. createLocal (0.9ms)
3. createLocalOrUTC (0.8ms)

Now I know what you are thinking, this is so minimal. The dreaded micro-optimisation. Of course it depends on the circumstances of the problem and how complex your date logic is, but it’s always worth reviewing if there is the need to import a package to do such a thing. In my case I would say it isn’t needed. So I decided to turn to a library called date-fns just to see how it compares.

The date-fns library is different as it’s modular, meaning you only need to import the functionality you need. This will of course reduce the final bundle size. It doesn’t try and create its own object like Moment does, and it still makes use of the native Date object provided by JavaScript.

Date FNS example

Total time spent using this differenceInDays function from date-fns was 0.1ms. It required 3 other internal modules to accomplish the task, but is much lighter in comparison to moment. The file size of my bundle was 18KB. This means the functionality of date-fns was 3KB to achieve the same thing!

Photo by Ian Stauffer on Unsplash

Take a moment.js to observe the sizes of your packages and improve your overall page performance.

Sorry for the cringe-able pun. Thanks for reading, and please drop a few claps if you found it useful. Expecting happy birthdays mid-September time in the comments :) Man… I’m getting old.

Shaun Michael StoneTwitter: @shaunmstone