Vue 框架下如何实现加载速度的提升

news2025/1/15 6:42:47

现在前端的框架有很多,甚至两只手已经数不过来,当然也完全没必要全部都学,还是应该深入的学习一两个被广泛使用的就好。其实我和大部分同学的想法一致,认为最值得我们深究的还是主流的 Vue 和 React。我们通过深入的学习了解这些框架的思维,也让自己使用这些框架能够更加得心应手。
在这里插入图片描述

这里我以自己常接触到的 Vue 为例进行说明,但也要特别说明下,本人的水平有限,如果有理解不到位的地方也欢迎大家拍砖。

相信和我一样选择 Vue 框架的主要原因是,它作为当前最流行的 JavaScript 前端框架之一,在轻量、效率、灵活度上面有比较强的优势。但是在实际的项目中深入使用发现,一些合理的技巧可以在一定程度上提升app的性能表现。

想把自己发现关于解决加载速度的一些经验分享给大家。

一、初次打开加载速度慢

在我所经历的项目中有过这样一种情况,如果一次性加载所有的组件,就会很明显的出现打包后的 JavaScript 文件体积过大,直接影响到了 app 初次加载速度。

在社区搜索了懒加载相关的处理办法,再和团队讨论后的办法是只加载需要的组件,等到app需要的时候再异步加载其他组件。

其实在 Vue 中使用懒加载的方式很简单,总括起来只需要两步:

使用动态 import 语法进行按需加载组件。
将加载的组件定义为异步组件。
这里放一个 demo 出来:

// Home.vue

<template>
  <div>Home page</div>  
</template>

<script>
  export default {
  name: 'Home'
  }
</script>

// App.vue

<script>
  export default {
  components: {
  Home: () => import('./views/Home.vue') 
  }
  }  
</script>

这样做的话 Home 组件就只会在需要的时候加载,可以在一定程度上避免加载首页不需要的组件,也能够明显的提升 app 加载速度。

二、重复渲染的解决办法

会发现在我们实际的应用中会存在频繁切换查看某些组件的情况,这时就不可避免的造成重复渲染,影响到app的性能。

而大家都知道 Keep-alive 组件是 Vue 项目中的一个高阶组件,是可以帮助我们缓存组件实例,提高应用程序的性能和响应速度的,只要合理的配合使用 keep-alive 组件实现缓存就能避免每次切换都得重新渲染。

同样配合一个demo:

// App.vue

<keep-alive>
  <component :is="currentView"></component>  
</keep-alive>

其实它的逻辑就是使用 keep-alive 组件将动态组件包裹起来,Vue就会缓存不活动的组件实例。例如在上面的demo里面将 currentView 动态组件使用 keep-alive 包裹起来,currentView 在切换时就会被缓存起来,实现组件的高效循环利用。

但是需要注意的一点是,我们在使用 keep-alive 组件时会默认缓存所有组件,如果需要指定缓存的组件可以使用 include 和 exclude 属性。

三、提取数据时卡顿问题

除了前面说到的懒加载和 keep-alive 组件外,我们还可以通过创建好组件实例,以异步获取数据的形式去提升加载的速度,继而再显示组件的方式,最终这种方式可以让数据提前准备好,一旦组件需要显示时,就可以避免因为实时获取数据而造成的卡顿。

我个人实现的使用方式是在 beforeMount 中获取数据,然后在 mounted 中控制显示组件:

// Comonent.vue

export default {
  async beforeMount() {
    await fetchData(); 
  },
  mounted() {
    this.show = true;
  }  
}

四、合理的异步组件使用

最后我还想分享下 Vue 提供的异步组件,其实合理使用也可以发挥比较好的效果,具体的实现和最上面介绍的懒加载组件类似。

区别有两点:一是懒加载组件主要是在首次访问时使用;二是异步组件在创建组件实例时进行使用。因为异步组件的基本使用逻辑是在创建实例的时候会异步解析,可以按需加载,实现方式:

Vue.component('async-example', function (resolve, reject) {

  setTimeout(() => {
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)

})

五、应用轻应用技术代替H5

我们知道目前轻应用也正在流行起来,其中又属小程序具有代表性,虽然不可以直接使用 Vue 开发小程序。但可以通过使用小程序开发框架,例如 Taro、Mpvue 和 uni-app,可以将 Vue.js 前端框架的开发方式与小程序相结合。这些框架可以将前端框架的语法和特性转换为小程序的语法和特性,从而使得开发人员可以使用熟悉的开发方式来开发小程序。

这里还要推荐一个深化发挥小程序价值的途径,直接将现有的小程序搬到自有 App 中进行运行,这种实现技术路径叫做小程序容器,例如 FinClip SDK 是通过集成 SDK 的形式让自有的 App 能够像微信一样直接运行小程序。

这样一来不仅可以通过前端框架提升小程序的开发效率,还能让小程序运行在微信以外的 App 中,真正实现了一端开发多端上架,另外由于小程序是通过管理后台上下架,相当于让 App 具备热更新能力,避免 AppStore 频繁审核。

相信大家在关于 Vue 框架使用上还有更好更多的经验,我仅按照自己的使用习惯分享几个相对来说比较适合广泛用起来的办法,也欢迎各位大佬补充和指正。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/885500.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker、Linux网络代理设置

网络代理 linux机器通过windows主机代理访问外网 windows机器借用 CCProxy 软件&#xff0c;官网下载免费版(http://www.ccproxy.com/) CCProxy 默认使用808端口&#xff0c;如果端口冲突可以在设置处修改 在帐号处添加允许的linux机器ip&#xff0c;也可以直接允许所有ip,其…

flinksql实时统计程序背压延迟优化

问题&#xff1a; flinkcdcflinksql做实时读取sls日志和实时统计业务指标&#xff0c;今天发现程序背压了&#xff0c;业务延迟了6个小时。解决办法&#xff1a; 1、资源优化 作业并发大时&#xff1a;在作业的高级配置的资源配置中&#xff0c;增加JobManager的资源&#xf…

最低日薪2K的护网怎么才能参加?

前天&#xff0c;这张图在网络安全圈里传疯了&#xff0c;原因是黑客一年一度的盛会&#xff1a;HVV行动开始了。并且有人戏称昨天是黑客界的春运。 更有人建议把所有的交通工具都停掉&#xff0c;就没有黑客了。甚至有火车站电子大屏显示被黑客进攻&#xff0c;有可疑程序正在…

快速通过华为HCIP认证

你可以按照以下步骤进行准备和学习&#xff1a; 华为认证课程和资料--提取码:1234https://pan.baidu.com/s/1YJhD8QbocHhZ30MvrKm8hg 了解认证要求&#xff1a;查看华为官方网站上的HCIP认证要求和考试大纲&#xff0c;了解考试的内容、考试形式和考试要求。 学习相关知识&am…

Springboot 实践(5)springboot添加资源访问目录及目录测试

前文讲解了swagger测试服务控制器&#xff0c;实现了数据库数据访问&#xff0c;这些功能都是运行在后台服务器上&#xff0c;实际用户并不能直接调用接口获取数据&#xff0c;即使用户能够利用接口获取到数据&#xff0c;数据也是结构化数据&#xff0c;不能争取转化成用户使用…

【js】Array.from将类数组对象转为数组

Array.from()方法支持将类似数组的对象转为数组。所谓类似数组的对象&#xff0c;本质特征只有一点&#xff0c;即必须有length属性。因此&#xff0c;任何有length属性的对象&#xff0c;都可以通过Array.from()方法转为数组。 代码&#xff1a; var arrayObj {"0"…

行业首发!《硬件工程师进阶武器库》免费赠送!限量2000份,送完不补!

对于刚入硬件行业的3~5年工程师来说&#xff0c;如果能有一个好的师傅引路&#xff0c;那是最好不过的了&#xff0c;但是往往大神很少&#xff0c;能够愿意倾囊相授的也难遇到&#xff1b; 如果在这个阶段&#xff0c;能够找到行业中top级企业内部的学习资料&#xff0c;或者…

【正点原子STM32连载】 第七章 Geehy标准库版本MDK工程创建 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html# 第七…

图解 Paxos 算法

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱写博客的嗯哼&#xff0c;爱好Java的小菜鸟 &#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&#x1f44d;一下博主哦 &#x1f4dd;个人博客&#xff1a;敬请期待 &#x1f4d5;系列…

Dubbo基础学习(笔记一)

目录 第一章、概念介绍1.1&#xff09;什么是RPC框架1.2&#xff09;什么是分布式系统1.3&#xff09;Dubbo概述1.3&#xff09;Dubbo基本架构 第二章、服务提供者2.1&#xff09;目录结构和依赖2.2&#xff09;model层2.3&#xff09;service层2.4&#xff09;resources配置文…

vector【2】模拟实现(超详解哦)

vector 引言&#xff08;实现概述&#xff09;接口实现详解默认成员函数构造函数析构函数赋值重载 迭代器容量size与capacityreserveresizeempty 元素访问数据修改inserterasepush_back与pop_backswap 模拟实现源码概览总结 引言&#xff08;实现概述&#xff09; 在前面&…

VMware虚拟安装Ubuntu,然后切换Ubuntu内核版本

无论你选择哪种方法&#xff0c;一旦进入 GRUB 引导菜单&#xff0c;你应该能够选择需要的内核版本并启动系统。 打开终端&#xff1a;你可以通过按下 Ctrl Alt T 快捷键来打开终端。 使用 sudo&#xff1a;切换内核需要管理员权限&#xff0c;因此你需要使用 sudo 命令。首…

QtCreator 配置 MSVC 编译工具

在官网下载的 Qt 都是配置 mingw&#xff0c;没法使用 webenginewidgets&#xff0c;只有使用 msvc 编译的 Qt&#xff0c;才带有 web 控件。原理都是下载 Visual Studio 安装&#xff0c;使用其中的 msvc 工具&#xff0c;如果只下载 msvc 而不必下载使用 VS 其它工具&#xf…

【日常积累】使用frp进行内网穿透

frp 是什么&#xff1f; frp 是一个专注于内网穿透的高性能的反向代理应用&#xff0c;支持 TCP、UDP、HTTP、HTTPS 等多种协议&#xff0c;且支持 P2P 通信。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。 为什么使用 frp&#xff1f; 通过在具…

我记不住的grep和find命令

前言&#xff1a; Linux操作中总是会用到查找操作&#xff0c;无论是查找文件、目录&#xff0c;还是查找文件中的内容等。grep命令用于在某个文件文本中查找指定的字符串&#xff0c;类似于word中的ctrlF&#xff0c;而find命令用于在某个指定的目录中查找某个文件或某个目录。…

深入学习SpringCloud Alibaba微服务架构,揭秘Nacos、Sentinel、Seata等核心技术,助力构建高效系统!

课程链接&#xff1a; 链接: https://pan.baidu.com/s/1hRN0R8VFcwjyCTWCEsz-8Q?pwdj6ej 提取码: j6ej 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 --来自百度网盘超级会员v4的分享 课程介绍&#xff1a; &#x1f4da;【第01阶段】课程简介&#xff1a;全…

函数性能探测:更简单高效的 Serverless 规格选型方案

作者&#xff1a;拂衣、丛霄 2019 年 Berkeley 预测 Serverless 将取代 Serverful 计算成为云计算新范式。Serverless 为应用开发提供了一种全新系统架构。借助 2023 年由 OpenAI 所带来的 AIGC 风潮&#xff0c;以阿里云函数计算 FC、AWS Lambda 为代表的 Serverless 以其更高…

软件压力测试对软件产品起到什么作用?

一、软件压力测试是什么? 软件压力测试是一种通过模拟正常使用环境中可能出现的大量用户和大数据量的情况&#xff0c;来评估软件系统在压力下的稳定性和性能表现的测试方法。在软件开发过程中&#xff0c;经常会遇到一些性能瓶颈和稳定性问题&#xff0c;而软件压力测试的作…

AlexNet网络结构详解

AlexNet论文地址&#xff1a; https://proceedings.neurips.cc/paper/2012/file/c399862d3b9d6b76c8436e924a68c45b-Paper.pdf 1、简介 AlexNet是2012年ISLVRC(ImageNet Large Scale Visual Recognition Challenge)竞赛的冠军网络&#xff0c;图像分类的正确率从70%提升到80%&…

《财讯》期刊简介及投稿要求

《财讯》杂志是经国家新闻出版总署批准&#xff0c;面向国内外公开发行的“全国综合性教育理论学术期刊 面向全国各级各类大、中专经济院校工作者&#xff1b;银行、经贸委、财政及行政管理人员&#xff0c;是作者科研、晋级等方面权威依据的优秀期刊。 主管单位&#xff1a;…