Size Matters: A Practical Guide to a 98% Reduction in Package Size with Day.js
Episode 1: Quick Preview
What is MomentJS & Why do we need it?
Moment is an external package for managing dates and times in your project, allowing you to format your date-time data. Another external package, moment-timezone, enables the manipulation of date-time data between timezones.
As a global company with numerous partners in different countries, we must provide our date-time data with timezone formatting.
Why Do We Want to Get Rid of MomentJS?
Firstly, as many of you may know, Moment is deprecated, but it is still usable on package managers such as NPM. However, using only Moment does not satisfy all of our needs; we also have to use moment-timezone. Let’s take a look at the chart to understand our concerns.
As you can see above, the Moment & moment-timezone couple is quite large for the client side. Let’s continue and find an alternative library.
An Alternative Library Selection
We began our research on Moment’s official website and found documentation explaining why Moment is deprecated, along with alternatives and their pros and cons. You can check the documentation here: Moment Project Status.
After extensive research, we narrowed down our selections to two alternatives: date-fns, popular and widely used, and dayjs, known for its small size and an API almost 100% compatible with Moment. Now, let’s check the performance and size comparison chart to see which one we chose.
Of course! We selected dayjs because of its small size, pluggability, and moment-like writing style. If you have your coffee ready, let’s dive in deeper! ☕
Episode 2: Migration
How Did We Start to Migrate?
With our complex codebase, some clever developers created a helper file for dedicated date-time functions called DateHelper.js. We quickly scanned the remaining files using Moment and replaced these functions with DateHelper functions. Now, our code structure looks like this:
We copied DateHelper.js and created a repository for it. We completed unit tests for each function, achieving 100% coverage. With the power of unit tests, we could be sure what function will return what value with what parameters.
Here is a small part of how DateHelper.js looks and its unit tests:
DateHelper.js:
DateHelper.test.js:
After that, we installed dayjs instead of moment & moment-timezone and started replacing them. Just a few changes were required: only import lines and moment functions calls changed.
Here is the diff:
And the final version of DateHelper is also available:
No unit test changes were required, and they confirmed our migration was working correctly.
Here is the final result of DateHelper.test.js
When we follow the same steps for the remaining parts, we will completely get rid of moment & moment-timezone forever.
The article explains how to reduce client-side load size while migrating momentjs functions to dayjs. Also, it includes some practices, such as using another layer for managing external packages for maintainability.
I hope you enjoyed what you read along with your coffee ☕️
If you are interested in more performance tricks, you can check this article by Ali Osman Menekse, Senior Frontend Developer at Insider.
