“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Hello, everyone! I’m big brother from the front End Lab!

For a long time, the JavaScript library used to handle times and dates was momment.js. Its API is clear and simple, easy to use and versatile.

Big Brother is a heavy user of moment.js. Reference moment.js whenever you encounter a time and date operation. Until the day I found that the loaded moment.min.js was 19.8KB, while my entire page was less than 5KB, the appeal of moment.js was diminished. This moment.js is a bit too big.

Two streamlined alternatives were found in the open source community:Day.jsandMiment.

Day.js

Day.jsIs a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers. Day.jsIt’s a countermark in itselfMoment.jsIt was developed to be compatibleMoment.jsThe API. There’s a sentence on the websiteIf you use Moment.js, you already know how to use Day.js.

Let’s compare the use of day. js with moment.js.

// Parse and display dayjs().format(); moment().format(); / / formatting dayjs (' 2021-11-18 ', '- DD YYYY - MM) moment (' 2021-11-18', 'YYYY-MM-DD') var d = new Date(2018, 8, 18); var day = dayjs(d); var m_day = moment(d); / / dayjs values () year () my moment () year () / / operation dayjs (' 2020-01-25 '). The add (1, 'day), subtract (1, "year"). The year (2009); moment('2020-01-25').add(7, 'days').subtract(1, 'months').year(2009);Copy the code

The API of Day.js is almost identical to moment.js, and the cost of learning and migration is very low. For the most part, API call statements can be left verbatim. What is the size of day.js? 2 KB. Think about the size of moment.js.

Miment

Miment(“Mini Moment”) is also a lightweight time library, packed and compressed even smaller: about1KB.The author team kept itMoment.jsThe core method, which addresses the requirements of common scenarios, has thisMoment lite.

The MimentAPI falls into three broad categories

The first type, which returns other objects, like format, returns a string, and JSON returns a JSON object.

miment().format('YYYY') // 2021
miment().json() //{"year": 2021,"month": 11,"date": 16,"hour": 16,"minute": 26,"second": 45,"day": 2,"milliSecond": 887}
Copy the code

The second type returns a Miment object. You can call one API and then call another, which is what we call a chain call.

miment().add(1, 'YYYY').add(2, 'MM').add(-3, 'DD')
Copy the code

It is important to note that you do not mix type 1 and type 2 apis. When you call the first type of method, the object type returned is not Miment, and chain calls are no longer supported.

The third class inherits from Date objects, that is, Miment also has methods that Date objects have.

miment().getFullYear() //2021
miment().getDate() //16
Copy the code

Miment is welcome if you want some of the core capabilities of moment.js but don’t want the package to swell.

conclusion

Could we replace moment.js entirely with day.js or Miment?

It isn’t. First, the framework or JavaScript library already relies on moment.js, so there’s no need to replace it with day.js or Miment. Second, Moment. Js is more versatile when you need a more sophisticated API. Miment contains only the core functionality.

In addition to the above two cases, day.js and Miment can be replaced if they are more suitable for use in temporal scenarios.

Especially for non-SSR applications where you want to simplify the first screen rendering speed, using Day.js or Miment is really attractive.

Through the front door, there was a family

Original is not easy, praise, message, share is big brother to write down the power!