【Vue】首屏加载优化

文章目录

        • 1. 使用路由懒加载
        • 2. 使用异步组件
        • 3. 精灵图雪碧图
        • 4. 使用webp格式图片
        • 5. 添加loading效果
        • 6. 事先设置图片宽高
        • 7. 配置webpack
        • 8. 利用CDN加速资源
        • 9. 延迟加载不重要的资源
        • 10. 服务器端渲染

1. 使用路由懒加载
  • 首屏进入时只加载首屏相关路由,其他路由实现懒加载(打开时再去加载)
2. 使用异步组件
  • 首屏加载组件时会将所有组件一起加载,而非首屏要显示的组件可以使用异步引入
3. 精灵图雪碧图
  • 将多个需要请求的图片合成一张,可减少http请求
4. 使用webp格式图片
  • 相同质量下,webp的图片体积比jpeg格式的图像减少40%,使得加载速度更快
5. 添加loading效果
  • 在加载期间,添加loading提示、骨架屏、进度条等,可以从感知上减少用户等待时长
6. 事先设置图片宽高
  • 可以避免图片的高度变化带来的重绘重排
7. 配置webpack
  • 配置Webpack将代码拆分成多个小块,利用Tree Shaking、代码压缩等技术减少代码体积
// vue.config.js
module.exports = {configureWebpack: {optimization: {splitChunks: {chunks: 'all'}}}
};
8. 利用CDN加速资源
  • 对于常用的第三方库和资源,借助CDN来加速(会寻找离自己物理最近的站点去获取资源)加载,从而提高页面加载速度。
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
9. 延迟加载不重要的资源
  • 对于非关键资源(如广告等),可以将其延迟加载。
  • 或者不是主要的首屏组件,也可以使用延迟加载
10. 服务器端渲染
  • 对于关键内容,使用服务器端渲染可以提供更快的加载速度。
  • 服务器端将HTML直接发送到浏览器,减少了客户端渲染的时间。
  • 因为在客户端需要运行js后再去拿数据。

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

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

相关文章

掌握高级设计原则:Java中的过滤器模式解析与实战演练,构建灵活且可扩展的系统架构

过滤器模式是一种结构型设计模式&#xff0c;它允许开发者使用不同的标准来过滤一组对象&#xff0c;并通过逻辑运算以解耦的方式将它们联系起来。 过滤器模式的核心在于提供了一个处理对象的机制&#xff0c;这个机制可以根据一个或多个标准来决定哪些对象应该被接受、哪些应…

解析KafkaConsumer类的神奇之道

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 解析KafkaConsumer类的神奇之道 前言KafkaConsumer双线程设计主线程&#xff08;消费线程&#xff09;&#xff1a;心跳线程&#xff1a;示例代码&#xff1a; KafkaConsumer线程不安全线程安全的替代…

jetson nano——编译一些包的网址导航,pyside2,qt(持续更新)

目录 1.PySide2下载地址2.tesserocr下载地址3.Qt下载地址4.OpenSSL官网5.latex编译器下载地址5.1MikTex5.2TeX Live 1.PySide2下载地址 https://download.qt.io/official_releases/QtForPython/pyside2/ 如下图&#xff1a; 2.tesserocr下载地址 https://github.com/simonflue…

JavaWeb-CSS

一、CSS简介 CSS 是一门语言&#xff0c;用于控制网页表现 CSS(Cascading Style Sheet):层叠样式表 W3C标准&#xff1a;网页主要由三部分组成 结构&#xff1a;HTML 表现&#xff1a;CSS 行为&#xff1a;JavaScript 二、CSS导入方式 CSS导入HTML有三种方式&#xff1…

PTA冰岛人

作者 陈越 单位 浙江大学 2018年世界杯&#xff0c;冰岛队因1:1平了强大的阿根廷队而一战成名。好事者发现冰岛人的名字后面似乎都有个“松”&#xff08;son&#xff09;&#xff0c;于是有网友科普如下&#xff1a; 冰岛人沿用的是维京人古老的父系姓制&#xff0c;孩子的姓…

行业突破!四信实现低延时摄像头弱网状态100ms以内实时传输

随着人工智能、大数据、区块链等技术在城市中快速发展&#xff0c;人们日常生活中已经离不开网络的支撑&#xff0c;而实现“人与人”、“人与物”及“物与物”之间高速连接应用的“时延”&#xff0c;是网络支撑中最重要的存在。 以城市生活例子为例&#xff0c;当网络延时出现…

week07day02(powerbi)

一. 透视列 1. 选择一列&#xff0c;然后再转换中选择透视列&#xff0c;被选择的这一列就会变成 列名 2. 只能选择一列&#xff0c;不能同时选择多列 3. 透视表是二维表&#xff0c;数值匹配不上会用 null值 替代。 4. 透视列中存在高级选项&#xff0c;根据所需选择相应功…

通过日志恢复sql server数据库

在SQL Server中&#xff0c;通过日志恢复数据库是一个精细的过程&#xff0c;主要用于在数据库出现错误、数据丢失或需要回滚到特定时间点时恢复数据。以下是一般步骤概述&#xff1a; 设置恢复模式&#xff1a; 首先&#xff0c;数据库必须配置为“完整恢复模式”或“大容量…

【Miniconda】Linux系统中 .condarc 配置文件的位置一般在哪里

【Miniconda】Linux系统中 .condarc 配置文件的位置一般在哪里 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到…

3. ElasticSearch搜索技术深入与聚合查询实战

1. ES分词器详解 1.1 基本概念 分词器官方称之为文本分析器&#xff0c;顾名思义&#xff0c;是对文本进行分析处理的一种手段&#xff0c;基本处理逻辑为按照预先制定的分词规则&#xff0c;把原始文档分割成若干更小粒度的词项&#xff0c;粒度大小取决于分词器规则。 1.2 …

疑问彻底搞懂TIME_WAIT状态为什么等待2MSL的时长

文章目录 1. TIME_WAIT状态2. 等待2MSL原因 1. TIME_WAIT状态 TIME_WAIT状态是TCP连接关闭过程中的一个状态&#xff0c;它表示连接已经被关闭&#xff0c;但是仍然在等待一段时间以确保远端接收到连接关闭的确认消息。在这个状态下&#xff0c;连接不再传输数据&#xff0c;但…

单片机FLASH深度解析和编程实践(上)

本篇文章主要针对单片机FLASH编程和FLASH基本原理进行学习分享。以STM32单片机作为实例进行编程实训。 关于FLASH操作的相关寄存器及编程&#xff0c;大家可以参考下一篇文章: 单片机FLASH深度解析和编程实践&#xff08;下&#xff09;-CSDN博客 目录 一、STM32编程方式 二、…

Ansys Lumerical | 激光雷达天线仿真

附件下载 联系工作人员获取附件 在本文中&#xff0c;我们将了解如何根据激光雷达应用需求设计和优化相控阵光栅天线。 概述 激光雷达&#xff08;LIDAR&#xff09;是“light detection and ranging”的简称&#xff0c;近年来由于在机器人、自动驾驶汽车、高精度测绘等领域…

app分发步骤有那些?

APP分发的步骤主要包括以下几个方面&#xff1a; 准备应用程序&#xff1a;首先&#xff0c;开发人员需要确保应用程序已经经过完整的测试和质量保证&#xff0c;包括功能测试、用户体验测试、性能测试等&#xff0c;以确保其稳定性和可靠性。注册开发者账号&#xff1a;在相应…

万物互联的价值

随着我们习惯了万物互联&#xff0c;我们将需要改变我们的行为和使用互联网的方式。这并不像看起来那么困难。毕竟&#xff0c;自 20 世纪 90 年代中期互联网普及以来&#xff0c;你们中的许多人都会经历过各种经历的变化。你们中的许多人已经看到了网络邮件、在线电影和音乐、…

Flink实时写Hudi报NumberFormatException异常

Flink实时写Hudi报NumberFormatException异常 问题描述 在Flink项目中&#xff0c;针对Hudi表 xxxx_table 的 bucket_write 操作由于 java.lang.NumberFormatException 异常而从运行状态切换到失败状态。异常信息显示在解析字符串"ddd7a1ec"为整数时出现了问题。报…

挑战杯 机器视觉的试卷批改系统 - opencv python 视觉识别

文章目录 0 简介1 项目背景2 项目目的3 系统设计3.1 目标对象3.2 系统架构3.3 软件设计方案 4 图像预处理4.1 灰度二值化4.2 形态学处理4.3 算式提取4.4 倾斜校正4.5 字符分割 5 字符识别5.1 支持向量机原理5.2 基于SVM的字符识别5.3 SVM算法实现 6 算法测试7 系统实现8 最后 0…

基于comsol七芯光纤超模模拟分析

本期教程主要向大家介绍一期采用comsol有限元分析软件进行七芯光纤模拟分析的模拟教程。首先介绍一下基本知识点 七芯光纤超模理论&#xff08;Supermode Theory for Seven-Core Fibers&#xff09;涉及一种特殊类型的多芯光纤&#xff08;MCF&#xff09;技术。在这里&#x…

jvm 内存泄露、内存溢出、栈溢出区别

JVM&#xff08;Java虚拟机&#xff09;是负责执行Java程序的运行环境。以下是对内存泄露、内存溢出和栈溢出这几个概念的解释&#xff1a; 内存泄露&#xff08;Memory Leak&#xff09;&#xff1a; 内存泄露指的是程序中分配的内存空间在不再被使用时没有被释放的情况。这可…

【消息队列开发】 测试MessageFileManager(对硬盘中的消息操作)类

文章目录 &#x1f343;前言&#x1f384;测试流程&#x1f334;准备工作&#x1f332;测试创建队列功能&#x1f333;测试统计文件的读写&#x1f38b;测试将相应消息放入文件中&#x1f38d;测试读文件里的消息到内存&#x1f340;测试删除消息&#x1f60e;测试垃圾回收⭕总…