Moment.jsからDay.jsに乗り換えるメモ📝

Moment.jsは現在メンテナンスモードに入っているため、今更ながらDay.jsに乗り換えたのでやり方とかをメモ📝

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

Day.jsとは

Fast 2kB alternative to Moment.js with the same modern API Day.js · 2kB JavaScript date utility library

2kBという軽量なmoment.jsの代替ライブラリのようです。

day.js.org

使い方もかなりMoment.jsに近く実装されているようです。

moment().format('dddd');  
dayjs().format('dddd')

Day.jsをinstallする

私はTypeScriptの環境を利用していたのでほぼ以下のドキュメントの通りにinstallしました。

day.js.org

ただ上記のドキュメントのimport部分がドキュメント通りだと型が上手く効かなかったので以下の通りdefalt exportされているものを利用するようにしました。

-- import * as dayjs from 'dayjs'
++ import dayjs from "dayjs";

dayjs().format()

moment.jsからdayjsに乗り換える

上述の通りDay.jsはMoment.jsにかなり使い方が近いの乗り換えは比較的簡単でした。

-- import moment from "moment";
++ import dayjs from "dayjs";

export function formatDate(datetime: Date, format: string): string {
--  return moment(datetime).format(format);
++  return dayjs(datetime).format(format);
}

またMoment.jsのfromNowを利用している箇所があったので以下のドキュメントを参考にrelativeTime pluginを利用しました。

-- import moment from "moment";
++ import dayjs from "dayjs";
++ import relativeTime from "dayjs/plugin/relativeTime";

++dayjs.extend(relativeTime);

export function fromNow(datatime: Date): string {
--  return moment(datatime).fromNow();
++  return dayjs(datatime).fromNow();
}

day.js.org

おわりに

build結果も50KBほど軽くなってました👏

$ du public/packs
# before
856K    public/packs
# after
800K    public/packs

参考

d.potato4d.me