DayJS: The best lightweight alternative to momentjs
Tags: momentjs, react, javascript, opensource
Published: 2020-09-20 09:18:45

<p style="text-align: left">
  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
  <strong><a title="momentjs" href="https://momentjs.com/" target="_blank" rel="noopener nofollow">momentjs</a>
    vs
    <a title="dayjs" href="https://day.js.org/" target="_blank" rel="noopener nofollow">dayjs</a></strong>
  in many aspects. And tell you how and when dayjs is better and when
  <strong>momentjs</strong>.
</p>
<p style="text-align: left">
  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 <strong>dayjs</strong> shouldn't use
  <strong>momentjs</strong> just because you want to show date as
  <em>9 March, 20 </em>instead of <em>09/03/2020</em>.
</p>
<h2 id="why-momentjs-first-of-all-master-of-time" style="text-align: left">
  <a href="#why-momentjs-first-of-all-master-of-time">&nbsp;Why momentjs first of all? - Master of Time
  </a>
</h2>
<figure>
  <img src="https://ik.imagekit.io/garbagevalue/tr:n-blog_in_content/maxresdefault_9icg3BAX4M.jpg" alt="" width="100%"
    height="" />
</figure>
<p>
  <strong>MomentJS</strong> is one of the most popular and oldest date-related
  libraries. It has around
  <a title="momentjs github" href="https://github.com/moment/moment/" target="_blank" rel="noopener nofollow">43k GitHub
    stars</a>
  and is being used by around 1.3m GitHub repositories. It is most popular
  because of its rich and simple APIs for
  <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank" rel="noopener nofollow">date and time formatting and
    manipulation</a>
  and multi-platform compatibility and if anyone needs date/time formatting or
  manipulation, <strong>momentjs</strong> 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
  <strong>alternative</strong> felt.
</p>
<h2 id="why-one-shouldn-t-use-moment-js-then">
  <a href="#why-one-shouldn-t-use-moment-js-then" >Why one shouldn't use momentJS then?</a>
</h2>
<figure>
  <img src="https://ik.imagekit.io/garbagevalue/time_H-6WZ3TzdZ.jpg?tr=n-lg" alt="momentjs" width="100%"
    height="auto" />
  <figcaption>
    Photo by
    <a
      href="https://unsplash.com/@sonnnchen?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener nofollow">Sonja
      Punz</a>
    on<a
      href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener nofollow">Unsplash</a>
  </figcaption>
</figure>
<p>
  It's a trade-off, with such great features comes great <strong>cost</strong>.
</p>
<p>
  I'm using
  <a title="VSCode Import Cost" href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost"
    target="_blank" rel="noopener nofollow">VSCode Import Cost</a>
  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
  <a title="MaterialUI" href="https://material-ui.com/" target="_blank" rel="noopener nofollow">MaterialUI</a>
  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.<br />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.
  <span style="
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  ">The answer depends on application to application, and mostly we format the
    date, and a bit less frequently we do date manipulation.</span><span style="
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  ">
  </span>
</p>
<p>
  <span style="
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  ">So for only these work, &gt; 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.</span>
</p>
<h2 id="if-not-moment-js-then-what-alternative">
  <a href="#if-not-moment-js-then-what-alternative">If not momentJS then what alternative?</a>
</h2>
<figure>
  <img src="https://ik.imagekit.io/garbagevalue/tr:n-in_blog_content/day-js_DIIhkzReR2.png" alt="Day-JS-Github-Cover"
    width="100%" height="auto" />
  <figcaption>
    Image Credit:<a href="https://github.com/iamkun/dayjs" target="_blank" rel="noopener nofollow">DayJS GitHub</a>
  </figcaption>
</figure>
<p>
  I came to know about a library that mainly focused to tackle exactly the same
  issue that I mentioned above, named
  <a title="Day JS" href="https://day.js.org/" target="_blank" rel="noopener nofollow">DayJS</a>. The first two lines on their
  official documentation are
</p>
<blockquote>
  <strong>DayJS</strong> <br /><strong>2kB JavaScript date utility library</strong>
</blockquote>
<p>They say,</p>
<blockquote>
  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.
</blockquote>
<p>
  <a title="https://github.com/iamkun/dayjs" href="https://github.com/iamkun/dayjs" target="_blank"
    rel="noopener nofollow">DayJS</a>
  becoming popular with 25.6k GitHub stars surpassing
  <a title="https://github.com/date-fns/date-fns" href="https://github.com/date-fns/date-fns" target="_blank"
    rel="noopener nofollow">date-fns</a>
  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.
</p>
<h2 id="moment-js-vs-day-js">
  <a href="#moment-js-vs-day-js">momentJS vs DayJS?</a>
</h2>
<figure>
  <img src="https://ik.imagekit.io/garbagevalue/tr:n-blog_in_content/dayjs-versus-momentjs_K9ZZSejiE.jpg"
    alt="momentjs-vs-dayjs" width="100%" />
  <figcaption>
    Photo by&nbsp;<a
      href="https://unsplash.com/@jsnbrsc?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener nofollow">Jason
      Briscoe</a>&nbsp;on&nbsp;<a
      href="https://unsplash.com/s/photos/fight?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener nofollow">Unsplash</a>
  </figcaption>
</figure>
<p>
  So, for comparing momentJS with dayJS, I create three react projects using the
  command&nbsp;<code>npx
  <a title="create-react-app" href="https://garbagevalue.com/definitions/cra-create-react-app" rel="noopener dofollow">create-react-app</a></code>
  with names <em>dayjs-example</em> and <em>momentjs-example</em> and
  <em>minimal</em>. <em>dayjs-example</em> is to test dayjs, and so on. minimal
  is just the empty
  <a title="boilerplate" href="https://garbagevalue.com/definitions/boilerplate" rel="noopener dofollow" >boilerplate</a> for
  reference to the other two projects.
</p>
<ol>
  <li>
    <h3 id="import-cost"><a href="#import-cost">import cost</a></h3>
    <p>
      I added import statements in the <code>App.js</code>&nbsp;created
      by&nbsp;<a title="create-react-app" href="https://garbagevalue.com/definitions/cra-create-react-app" rel="noopener dofollow" >React CLI</a>&nbsp;boilerplate and
      just called&nbsp;<code>format</code>&nbsp;function
      for both in their corresponding projects
      and&nbsp;<code>minimal</code>&nbsp;is just the boilerplate, to compare how
      much each library causing the increase in size.&nbsp;
    </p>
    <p>
      Import costs for dayJS<strong>&nbsp;showed 7.2K (gzipped: 3K)</strong>&nbsp;and for momentJS, it
      showed&nbsp;<strong>130.6K (gzipped: 48K).&nbsp;</strong>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.
    </p>
  </li>
  <li>
    <h3 id="bundle-size"><a href="#bundle-size">Bundle Size</a></h3>
    <p>
      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.
    </p>
    <h4 id="day-js"><a href="#day-js">DayJS</a></h4>
    <p>
      42.3 KB&nbsp; 2.1807f41e.chunk.js<br />778 B&nbsp; &nbsp;
      runtime-main.950151df.js<br />633 B&nbsp; &nbsp; main.1cb3d8cc.chunk.js<br />556
      B&nbsp; &nbsp; main.d1b05096.chunk.css
    </p>
    <h4 id="moment-js"><a href="#moment-js">MomentJS</a></h4>
    <p>
      56.24 KB&nbsp; 2.891328c7.chunk.js<br /><span style="
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      ">783 B&nbsp; &nbsp; &nbsp;runtime-main.5092e59c.js<br /></span>635 B&nbsp; &nbsp;
      &nbsp;main.c2cbbad2.chunk.js<br />556 B&nbsp; &nbsp;
      &nbsp;main.d1b05096.chunk.css
    </p>
    <h4 id="minimal-project-without-any-external-library-aside-from-boilerplate">
      <a href="#minimal-project-without-any-external-library-aside-from-boilerplate">Minimal Project (without any
        external library aside from
        boilerplate)</a>
    </h4>
    <p>
      39.84 KB&nbsp; 2.917d530d.chunk.js<br />768 B&nbsp; &nbsp;
      &nbsp;runtime-main.bd245a24.js<br />608 B&nbsp; &nbsp;
      &nbsp;main.a5ca775c.chunk.js<br />556 B&nbsp; &nbsp;
      &nbsp;main.d1b05096.chunk.css
    </p>
    <p>
      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.
    </p>
  </li>
  <li>
    <h3 id="performance"><a href="#performance">Performance</a></h3>
    <p>
      Now, I'll show my results of testing the format functions for both
      momentjs and dayjs. I installed both momentjs and dayjs in my
      <em>minimal</em> project (size comparison is done). I wrote the following
      chunk of code in <code>App.js</code> function
    </p>
    <pre class="language-javascript"><code>useEffect(() =&gt; {
console.time('1');
moment().format('DD-MM-YYYY');
console.timeEnd('1');

console.time('2');
dayjs().format('DD-MM-YYYY');
console.timeEnd('2');

}, []);​</code></pre>
    <p>and the output of the following results as follows</p>
    <pre class="language-javascript"><code>1: 2.2763671875ms
2: 1.260986328125ms​</code></pre>
    <p>
      so it is clearly seen that dayjs took around half of the time of momentjs
      for the same function.
    </p>
  </li>
</ol>
<h2 id="conclusion"><a href="#conclusion">Conclusion</a></h2>
<figure>
  <img src="https://ik.imagekit.io/garbagevalue/tr:n-blog_in_content/conslusion_cBDHlNVmu.jpg"
    alt="momentjs-vs-dayjs-conclusion" width="100%" />
  <figcaption>
    Photo by&nbsp;<a
      href="https://unsplash.com/@kellysikkema?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener nofollow">Kelly
      Sikkema</a>&nbsp;on&nbsp;<a
      href="https://unsplash.com/s/photos/end?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener nofollow">Unsplash</a>
  </figcaption>
</figure>
<p>
  Now, the conclusion of the article is
  <strong>dayjs is the lightweight alternative</strong> to
  momentjs.&nbsp;<strong>BUT&nbsp;</strong>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
  <strong>good replacement of momentjs</strong> for basic date transformations,
  display, formatting, and so on. So it's all upon your requirements.<br />Thank
  you for reading. I hope you enjoyed it, if I missed anything or has any
  mistake in the <strong>comparison</strong> of both libraries, please let me
  know

<p>The article <a href="https://garbagevalue.com/blog/dayjs-the-best-lightweight-alternative-to-momentjs" rel="noopener dofollow">DayJS: The best lightweight alternative to momentjs</a> was originally published on <a href="https://garbagevalue.com/" rel="noopener dofollow">Garbage Value</a>