优化Vue中date format的性能详解 - CSDN文库

41 浏览量更新于2023-03-03 收藏 48KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

优化优化Vue中中date format的性能详解的性能详解

主要介绍了优化Vue中date format的性能详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有

一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在很多项目中，都需要将长整型的日期格式转换成其他的日期格式，而在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

结果图

npm run build --report 分析图

分析图中，文件占据的面积越大表示其文件的大小越大。很明显，moment.js差不多占据了整个打包文件的1/3 。而我们只是

用来转换日期这样的很小功能点。

使用使用 date-fns 代替代替 moment

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38695061

粉丝: 4
资源: 931

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈