如何轻松将日期库压缩到两KB
每位前端开发者都曾至少一次对着Webpack Bundle Analyzer报告心生恐惧。饼图中最大的一块几乎总是被Moment.js占据,还有数十个没人要求打包的语言包。项目早已进入维护状态,作者自己也建议寻找替代品,但旧习惯难改。熟悉的方法链和字符串格式化早已刻入肌肉记忆。
这正是Day.js诞生的原因。该库压缩后仅重2KB,同时保持与Moment.js近100%的API兼容性。
底层原理及轻量原因
旧库的主要问题在于其单体性质。你只是想用日期格式化,结果打包器把时区解析器、相对时间处理和上百种语言的翻译都拖进了包里。
Day.js的构建方式不同。核心库只包含基本解析、验证、简单操作和标准模式格式化。所有其他功能都拆分为独立的插件。如果需要计算季度或复杂自定义模式,就导入单独的模块。
语言包也遵循同样原则。在你明确调用所需文件的导入之前,任何西班牙语或中文都不会进入最终打包产物。
Day.js的所有对象都是不可变的。任何操作都会返回新实例,原始对象保持不变。
这种行为消除了每次计算前进行不必要对象克隆的需要。
熟悉的API和方法链
切换到新工具经常因为需要重新培训团队而停滞。使用Day.js则无需重新培训。几乎每个方法看起来都和五年前写的代码完全一样。
解析、值修改和格式化可以链式调用:
条件检查也同样简洁:
非标准任务的插件
核心的极简设计并不意味着功能缺失。当基础功能不够用时,插件就派上用场了。使用plugin()方法只需几行代码即可完成。
例如,如果项目需要稀有格式化令牌或序数:
相对时间(如"5分钟前"格式)、UTC处理、考虑工作时间的日期差异计算以及ISO周支持都以相同方式连接。你只为项目中实际使用的功能支付打包体积代价。
项目适合谁和不适合谁
Day.js非常适合首屏加载速度至关重要的应用。对于落地页、移动端界面、管理后台和客户端仪表盘,它在功能与体积比方面是最佳选择之一。
然而,在某些情况下应该选择其他方案:
- 如果正在从头构建面向现代浏览器的架构,可以看看原生
Date对象或即将推出的Temporal API。对于简单的格式化任务,可能根本不需要第三方库。 - 如果项目已经大量使用函数式方法和lodash风格架构,可能会发现使用
day-fns更方便,因为函数可以单独导入。
对于所有其他情况,尤其是从Moment.js代码库迁移时,Day.js仍然是最轻松、最快速的解决方案。只需在包中更改导入名称,就能从bundle中削减数十KB的无用重量。
相关项目