Format date in JavaScript

If you need to format dates in JavaScript, using this library instead of Moment.js will help you decrease your bundle size, a lot.

There’s a moment

Moment.js is one of the most popular libraries for formatting dates in JavaScript. It offers not only rich formatting capabilities but also localization to many languages. And that’s a problem.

Let’s say you needed to format dates in your SharePoint Framework solution. The moment you reference Moment.js in your project, the optimized Hello World bundle size will increase from 10KB to 278KB!

If you examine the bundle structure, you’ll see that the bulk of its size is made of Moment.js.

Luckily, there is an alternative.

Light-weight date formatting in JavaScript

Instead of using Moment.js to format dates, you can use its light-weight alternative: date-fns. It has similar capabilities, but there is one big difference. Size.

When using date-fns in the same SharePoint Framework project, the bundle size will increase only to 37KB, which is 240KB saving comparing to when using Moment.js!

Give it a try and I’m looking forward to hear how it’s worked for you.