Replace moment.js in Forms with a modern, smaller library

[bramdoppen]

Today, when running a pagespeed test on a website that uses Umbraco Forms, pagespeed insights reported some warnings about the large filesize of moment-with-locales.min.js which is used by Umbraco Forms.

Total filesize of the minified version (moment-with-locales) is 322kb. I inspected the JavaScript really quickly and I saw the usage of moment just a few times. The filesize seems pretty huge to me to include in a plugin like Umbraco Forms.

Suggestion: Replace moment.js with some other and modern library like dayjs (https://day.js.org/) which uses the same syntax, is modular/tree-shakeable, and only 2kb in size.

Happy to hear your thoughts about it!

I posted this issue also on https://our.umbraco.com/forum/using-umbraco-and-getting-started/107693-replace-momentjs-in-forms-with-a-modern-smaller-library but it was suggested to move it over here. Issue on our.umbraco is closed.

[AndyButland]

Thanks for reporting. I'm not sure we'll be able to do a direct swap as suggested, as we are using pikaday for the date picker, which in turn has an (optional, but I guess necessary for correct multi-region support) dependency on moment. You'll see all the references for how this is rendered and used in DatePicker.cshtml, and I believe this is only referenced, and hence the user has to download, if you are using date pickers on your form.

This is themeable, so it would be possible to override with your own date picker if you were minded to try to create and use a more efficient one.

I'll keep this open though as in future we could look at shipping with an updated date picker.

[bramdoppen]

Hi Andy, Thanks for your response.

I think the core power of Day.js (and why I preference Day.js) is that it uses the same API as moment.js, but remains a small library because you can pick which options you will be using.

As far as I can see, Day.js has great support for multi regions (localization) with this easy to integrate (official) plugin.

When looking at the way Pikaday uses the localization where you are referring to, this day.js plugin will do the job, because it behaves the same as moment.js would do:

Would be great to see that fixed in a future version of Umbraco Forms. Our main issue right now is that Google Pagespeed blames our websites for loading moment-with-locales.js for it's huge size.

Thanks in advance!

[Jogai]

The api is not 100% the same, see https://github.com/you-dont-need/You-Dont-Need-Momentjs for more info

[thebuilder]

Moment.js has been deprecated for some time now, and recommending you move away from it to more modern alternatives:

We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done.

https://momentjs.com/docs/#/-project-status/

Pikaday is also fairly old, and haven't been updated in 2 years.