老旧项目优化之 Moment 迁移 Dayjs

最近对我们项目进行优化， 从 Moment 迁移到 dayjs, 为什么要从 Moment 迁移到 dayjs 网上有很多类似文章 可以参考 zhuanlan.zhihu.com/p/61031739

综合考虑到以下几点，决定将 moment 替换成 dayjs：

1，dayjs 体积小；

2，moment 官方已经不维护且不支持 treeshaking；

3, moment 官方支持从 moment 迁移到 dayjs , 且 dayjs api 多数兼容 moment；

4, dayjs 支持 plugin 形式按需引入，不会导致太臃肿

于是我们开始干：

1，第一步网上很多文章也有提及， 直接通过打包工具在打包过程中将 moment 替换成 dayjs ， 简言之就是将 moment 别名实际改成 dayjs 引用， 附上代码

    resolve: {
        "rc-picker/es/generate/moment": "rc-picker/es/generate/dayjs",
        "moment/moment": "dayjs",
        moment: "dayjs",
       
      },

2，整完第一步后发现有些日期控件初始化显示 invalidate , 查阅文档 day.js.org/docs/en/get… ， dayjs 已经不支持 moment({ hour: 24 }) 这种形式的初始化方法， 简单替换后会导致日期初始化出错, 像这种情况需要改下代码

moment({ hour: 24 }) 
->
dayjs().hour(24)

3, Moment 一些 relative, duration 函数， dayjs 里需引入响应插件

const duration = require("dayjs/plugin/duration");
const relativeTime = require("dayjs/plugin/relativeTime");

4, Monent subtract, add 等函数有副作用会直接修改调用的对象， dayjs 没有副作用，需重新赋值， 在从 moment 迁移到 dayjs 场景需要赋值修改

    // moment可以直接这样操作，副作用会直接修改 dateTime
     dateTime.subtract(num, unit);
    // dayjs 需要重新将 dateTime 赋值一下
    dateTime = dateTime.subtract(num, unit);