概要
日付操作でお馴染みのmoment.jsですが、容量がでかいことでも知られています。
今回はday.jsを代替品として使って容量を軽くしていきたいと思います。
バンドルサイズの変化
私達のプロジェクトはNuxt.jsなので、バンドルサイズが可視化できるコマンドを使って見ていきたいと思います。
そもそものバンドルサイズを減らして何になるの？と思った人は下のサイトを閲覧するといいかもしれません。
webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ
Nuxt.jsでバンドルサイズを確認する方法
yarn build --analyze
moment.js
右上の方であぐらをかいていたmoment.jsが…
day.js
いなくなりました。
比較
Stat sizeだけでも、143.42KB→8.25KBへの削減ができています。めっちゃすげ〜（小並感）
手順
momentをアンインストールする
yarn remove moment
dayjsをインストール
yarn add dayjs
とりあえずプロジェクト内で「moment」を対象にGrepし置換していく
基本「moment」を「dayjs」に置換するだけでいいはずです。
dayjsのlocaleはimportしないとundefinedのままでエラーが出てしまうので、各自importしておきましょう。
Cannot read property 'weekdays' of undefined · Issue #235 · iamkun/dayjs
moment
import moment from 'moment';
moment.locale('ja');
dayjs
import dayjs from 'dayjs';
import 'dayjs/locale/ja';
dayjs.locale('ja');
fromNowなどの相対時刻取得にも別importが必要なので注意
これに限らず他にもPluginsはあるそうです
必要な場合はこちらを参考にimport、extendしましょう
moment
import moment from 'moment';
moment.locale('ja');
const dateStr = '2019/04/22';
moment(new Date(dateStr)).fromNow();
dayjs
import dayjs from 'dayjs';
import 'dayjs/locale/ja';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.locale('ja');
dayjs.extend(relativeTime);
const dateStr = '2019/04/22';
dayjs(new Date(dateStr)).fromNow();
まとめ
- dayjsすご
- importが多くなって行数増えるけどこれはトレードオフかなぁ
- 関係ないけどlottieのサイズでかすぎだろ
バンドルサイズをうまく減らせてダイエットできました〜
lodashなども使用するメソッドのみimportするといいかもですね〜
ありがとうございました〜
僕も自分のバンドルサイズを減らすためにスケボーしたいと思います〜
参考資料
dayjs/API-reference.md at dev · iamkun/dayjs