从moment.js到Day.js：中文环境迁移与自定义配置实战

1. 为什么从moment.js迁移到Day.js如果你正在使用moment.js处理日期时间可能已经感受到它的重量。一个简单的日期格式化操作就可能让你的项目打包体积增加几十KB。这在现代前端开发中尤其是移动端场景下显得越来越不合时宜。Day.js的出现正好解决了这个痛点。它提供了与moment.js几乎相同的API但体积只有2KB左右gzip后更小。我在最近的项目重构中实测过替换后打包体积减少了67%。更重要的是Day.js支持按需加载插件你可以只引入真正需要的功能。对于中文开发者来说Day.js同样提供了完善的语言环境支持。不过从moment.js迁移过来时还是需要注意一些细节差异。比如Day.js默认不包含语言包需要单独引入它的插件系统也让我们可以更灵活地定制中文显示格式。2. 基础迁移步骤2.1 安装与基本配置首先通过npm或yarn安装Day.js核心库和中文语言包npm install dayjs dayjs/locale/zh-cn然后在代码中初始化import dayjs from dayjs import dayjs/locale/zh-cn // 设置中文语言环境 dayjs.locale(zh-cn)这个基础配置已经能满足大部分需求。比如格式化当前时间dayjs().format(YYYY-MM-DD HH:mm:ss) // 输出2023-08-15 14:30:45 dayjs().format(dddd) // 输出星期二2.2 常用API对比从moment.js迁移时大部分API可以直接替换。这里列出几个常用方法的对比功能moment.jsDay.js当前时间moment()dayjs()解析字符串moment(2023-08-15)dayjs(2023-08-15)格式化format(YYYY-MM-DD)format(YYYY-MM-DD)相对时间fromNow()fromNow()日期加减add(7, days)add(7, day)注意几个细微差别Day.js的单位参数是单数形式day而不是days部分高级功能需要额外插件支持时区处理需要专门的时区插件3. 中文环境深度定制3.1 自定义区域设置虽然Day.js提供了默认的中文语言包但有时我们需要定制显示格式。比如把上午/下午改为AM/PM或者调整日期格式。import dayjs from dayjs import dayjs/locale/zh-cn dayjs.locale(zh-cn, { months: 一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月.split(_), weekdays: 星期日_星期一_星期二_星期三_星期四_星期五_星期六.split(_), // 其他自定义配置... })我在电商项目中就遇到过这样的需求需要把3天前显示为3天前下单。这时可以覆盖relativeTime配置dayjs.locale(zh-cn, { relativeTime: { future: %s后, past: %s前, s: 几秒, m: 1分钟, mm: %d分钟, h: 1小时, hh: %d小时, d: 1天, dd: %d天, M: 1个月, MM: %d个月, y: 1年, yy: %d年 } })3.2 高级格式化技巧Day.js支持非常灵活的日期格式化。比如处理带中文的日期dayjs().format(YYYY年MM月DD日) // 2023年08月15日 dayjs().format(dddd HH:mm) // 星期二 14:30对于更复杂的场景比如显示今天 14:30这样的格式可以使用calendar插件import calendar from dayjs/plugin/calendar dayjs.extend(calendar) dayjs().calendar(null, { sameDay: [今天] HH:mm, nextDay: [明天] HH:mm, nextWeek: dddd HH:mm, lastDay: [昨天] HH:mm, lastWeek: [上周] dddd HH:mm, sameElse: YYYY/MM/DD })4. 性能优化与最佳实践4.1 按需加载插件Day.js最大的优势之一就是模块化设计。比如只需要格式化功能时import dayjs from dayjs import advancedFormat from dayjs/plugin/advancedFormat dayjs.extend(advancedFormat) dayjs().format(Q季度) // 3季度常用插件包括relativeTime相对时间显示如3天前calendar日历格式显示timezone时区处理duration时长计算4.2 打包优化技巧通过配置打包工具的tree-shaking可以进一步减小体积。以webpack为例// webpack.config.js module.exports { //... optimization: { usedExports: true, sideEffects: false } }配合babel-plugin-import可以实现更精细的按需加载// babel.config.js plugins: [ [import, { libraryName: dayjs, customName: (name) { if (name locale) { return dayjs/locale/zh-cn } return dayjs/plugin/${name} } }] ]4.3 常见问题解决问题1为什么设置了中文环境但显示还是英文 解决方案确保在调用任何dayjs方法前已经设置locale并且正确引入了中文语言包。问题2fromNow()显示不正确 解决方案需要额外引入relativeTime插件import relativeTime from dayjs/plugin/relativeTime dayjs.extend(relativeTime)问题3时区处理有问题 解决方案使用timezone插件并明确指定时区import utc from dayjs/plugin/utc import timezone from dayjs/plugin/timezone dayjs.extend(utc) dayjs.extend(timezone) dayjs.tz.setDefault(Asia/Shanghai)