优化Vue中date format的性能详解

2023-08-03 04:26:04 56

在很多项目中，都需要将长整型的日期格式转换成其他的日期格式，而在Vue中，我们可以利用自定义相应的filter过滤器来进行dateformat的功能。如果直接引入moment的方法，在利用npmrunbuild--report时，会发现moment.js的文件相当大。显而易见，这么小的功能点却大大影响了项目的性能。

本文主要是利用npmrunbuild--report来分析打包文件的大小，进而对dateformat的功能点进行优化。

自定义'date-format'过滤器

我们可以先看一下自定义date-format过滤器及使用的方法。

安装moment

npminstallmoment--save

自定义过滤器filter

//src/filters/index.js

importVuefrom'vue'
importmomentfrom'moment'

//自定义过滤器
Vue.filter('date-format',function(value,formatStr='YYYY-MM-DDHH:mm:ss'){
returnmoment(value).format(formatStr)
})

在入口文件main.js加载过滤器

import'./filters'//加载过滤器

使用'date-format'过滤器

如上，{{dateTime|date-format}}即可将dateTime:1578794429153转换成dateTime:2020-01-1210:00:29

结果图

npmrunbuild--report分析图

分析图中，文件占据的面积越大表示其文件的大小越大。很明显，moment.js差不多占据了整个打包文件的1/3。而我们只是用来转换日期这样的很小功能点。

使用date-fns代替moment

安装date-fns

npminstalldate-fns--save

方法一：import{format}from'date-fns'

修改src/filters/index.js文件

importVuefrom'vue'
//importmomentfrom'moment'

import{format}from'date-fns'

//自定义过滤器
Vue.filter('date-format',function(value,formatStr='yyyy-MM-yyHH:mm:ss'){
returnformat(value,formatStr)
})

npmrunbuild--report分析图

方法二：import{format}from'date-fns'

修改src/filters/index.js文件

importVuefrom'vue'
//importmomentfrom'moment'

//import{format}from'date-fns'
importformatfrom'date-fns/format'

//自定义过滤器
Vue.filter('date-format',function(value,formatStr='yyyy-MM-yyHH:mm:ss'){
returnformat(value,formatStr)
})

npmrunbuild--report分析图

总结

压缩后的包文件大小从66.61KB->16.06KB->5.52KB

观察第一张图，可以很明显的看出：在使用Webpack将moment.js打包在构建结果中时，会占据很大的文件空间；而打包后的date-fns的文件要小很多。另外，date-fns里有很多函数。如果直接使用import{format}from'date-fns'表示引入date-fns所有包文件；而importformatfrom'date-fns/format'只是导入date-fns下的format文件。

参考文献

date-fns——轻量级的JavaScript日期库
date-fns官方文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

优化Vue中date format的性能详解

热门推荐

随机推荐