优化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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
小程序关于请求同步的总结
May 05 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Django在win10下的安装并创建工程
2017/11/20 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
房产转让协议书
2014/04/11 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
在职证明书模板
2015/06/15 职场文书
总经理聘用协议书
2015/09/21 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL