优化Vue中date format的性能详解


Posted in Javascript onJanuary 13, 2020

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

本文主要是利用 npm run build --report 来分析打包文件的大小,进而对 date format 的功能点进行优化。

自定义 'date-format' 过滤器

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

安装moment

npm install moment --save

自定义过滤器filter

// src/filters/index.js

import Vue from 'vue'
import moment from 'moment'

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

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

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

使用'date-format'过滤器

<template>
 <div class="page">
 <div class="delivery-wrapper">
  <span class="title">送达时间</span>
  <span class="delivery">{{dateTime | date-format}}分钟</span>
 </div>
 </div>
</template>

<script>
export default {
 name: '',
 components: {},
 data () {
 return {
  dateTime: 1578794429153
 }
 }
}
</script>

<style scoped lang="stylus"></style>

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

结果图

优化Vue中date format的性能详解

npm run build --report 分析图

优化Vue中date format的性能详解

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

使用 date-fns 代替 moment

安装 date-fns

npm install date-fns --save

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

修改src/filters/index.js文件

import Vue from 'vue'
// import moment from 'moment'

import { format } from 'date-fns'

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

npm run build --report 分析图

优化Vue中date format的性能详解

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

修改src/filters/index.js文件

import Vue from 'vue'
// import moment from 'moment'

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

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

npm run build --report 分析图

优化Vue中date format的性能详解

总结

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

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

参考文献

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
JS document文档的简单操作完整示例
Jan 13 #Javascript
JavaScript数组排序小程序实现解析
Jan 13 #Javascript
JS document form表单元素操作完整示例
Jan 13 #Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 #Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 #Javascript
JS表格的动态操作完整示例
Jan 13 #Javascript
JavaScript实现模态对话框实例
Jan 13 #Javascript
You might like
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
ES5和ES6中类的区别总结
2020/12/21 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
python动态参数用法实例分析
2015/05/25 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
如何写一个自定义标签
2012/12/28 面试题
中学教师岗位职责
2013/11/26 职场文书
倡议书格式
2014/04/14 职场文书
单位承诺书格式
2014/05/21 职场文书
工程项目经理任命书
2014/06/05 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
授权委托书
2014/07/31 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
人工作失职检讨书
2015/05/05 职场文书
公司开业主持词
2015/07/02 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书