优化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中的this指针
Mar 18 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
vue请求数据的三种方式
Mar 04 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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的历史和优缺点
2006/10/09 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
由浅到深了解JavaScript类
2006/09/08 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
Js动态创建div
2008/09/25 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
vue实现简单图片上传
2020/06/30 Javascript
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python paramiko模块学习分享
2017/08/23 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
工程业务员工作职责
2013/12/07 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
档案室主任岗位职责
2014/02/12 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
高三复习计划
2015/01/19 职场文书
会计工作岗位职责
2015/02/03 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
宿舍管理制度范本
2015/08/07 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python