从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.js | Day.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，并且正确引入了中文语言包。
问题2：fromNow()显示不正确？ 解决方案：需要额外引入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')