优化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 事件查询综合
Jul 13 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
初识Node.js
Mar 20 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
学习Node.js模块机制
Oct 17 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
vue+Element-ui实现分页效果
Nov 15 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
解析zend Framework如何自动加载类
2013/06/28 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
js实现3D旋转效果
2020/08/18 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
python写的一个文本编辑器
2014/01/23 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Python实现简易Web爬虫详解
2018/01/03 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python学生管理系统学习笔记
2019/03/19 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python 获取等间隔的数组实例
2019/07/04 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
如何在python中实现线性回归
2020/08/10 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
喜之郎果冻广告词
2014/03/20 职场文书
村长贪污检举信
2014/04/04 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
小学四年级学生评语
2014/12/26 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers