字玩FontPlayer开发笔记4 性能优化 首屏加载时间优化

字玩FontPlayer开发笔记4 性能优化 首屏加载时间优化

字玩FontPlayer是笔者开源的一款字体设计工具,使用Vue3 + ElementUI开发,源代码:
github: https://github.com/HiToysMaker/fontplayer
gitee: https://gitee.com/toysmaker/fontplayer

笔记

最近把本地开发已久的项目部署到阿里云上,但是由于笔者买的套餐带宽有限,加载速度非常慢,而SPA又将所有js打包到一个文件中,导致首屏白屏很久。但是提高带宽又比较贵目前还没有必要。无奈之下,我将项目在线体验部署到Github Pages上,暂时速度可以接受。但是首屏加载时间的优化(主要集中在打包js大小)还是个棘手的问题,需要好好研究。目前我采取的方法有:

1. FontAweSome按需加载

原来加载了全部FontAweSome图标:
(main.ts中代码)

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'library.add(fas, far, fab)

现在替换成:
(main.ts中代码)

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import {faArrowPointer,faCircle,faPercent,faArrowDownWideShort,faPenNib,faSquare,faDrawPolygon,faImage,faFont,faTerminal,faSliders,faTableCells,
} from '@fortawesome/free-solid-svg-icons'
import {faHand,faSquare as faSquare_regular,faCircle as faCircle_regular,
} from '@fortawesome/free-regular-svg-icons'
library.add(faArrowPointer,faCircle,faPercent,faArrowDownWideShort,faPenNib,faSquare,faDrawPolygon,faImage,faFont,faTerminal,faSliders,faTableCells,faHand,faSquare_regular,faCircle_regular,
)

2. Element Icon按需引入

原来加载了全部图标:
(main.ts中代码)

import * as ElementPlusIconsVue from '@element-plus/icons-vue'for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

现在替换成:
(main.ts中代码)

import { Files, Edit, Upload, Download, Tickets, Setting, List, Tools } from '@element-plus/icons-vue'app.component('Files', Files)
app.component('Edit', Edit)
app.component('Upload', Upload)
app.component('Download', Download)
app.component('Tickets', Tickets)
app.component('Setting', Setting)
app.component('List', List)
app.component('Tools', Tools)

3. 将首屏不用的代码放到最后,防止阻塞页面

笔者项目中引入了opencv.js:

<script src="lib/opencv.js"></script>

opencv.js是个比较大的库,首屏也不需要用到,就放到了html最底端

4. 加载首屏loading动画

在首屏加载文件白屏时,加一个loading动画可以提升用户体验,注意loading动画的css最好放在html头部,而不能放在外部style.css中防止loading字样已经显示,而动画样式还没有加载。

在src/index.html中,添加以下代码:

<div class="empty" style="position: absolute;z-index: -99;top: 0;left: 0;right: 0;bottom: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;
"><div class="enpty-tips">首次打开可能会有些慢,感谢耐心等待</div><div class="empty-loading" style="display: flex;flex-direction: row;gap: 20px;align-items: center;justify-content: center;margin-top: 48px;"><div class="loading-1" style="width: 14px;height: 14px;border-radius: 50%;background-color: black;"></div><div class="loading-2" style="width: 14px;height: 14px;border-radius: 50%;background-color: black;"></div><div class="loading-3" style="width: 14px;height: 14px;border-radius: 50%;background-color: black;"></div></div>
</div>
<style>body, html {width: 100%;height: 100%;position: relative;padding: 0;margin: 0;overflow: hidden;}.empty {.empty-loading {.loading-1 {animation: loading-1 2s;animation-iteration-count: infinite;}.loading-2 {animation: loading-2 2s;animation-iteration-count: infinite;}.loading-3 {animation: loading-3 2s;animation-iteration-count: infinite;}}}@keyframes loading-1 {0% {opacity: 1;}25% {opacity: 0.5;}50% {opacity: 1;}}@keyframes loading-2 {0% {opacity: 1;}50% {opacity: 0.5;}75% {opacity: 1;}}@keyframes loading-3 {0% {opacity: 1;}75% {opacity: 0.5;}100% {opacity: 1;}}
</style>

5. treeshaking

vite自动支持treeshaking,可以将程序中没有引用的模块清除掉,减小最终打包文件大小。

6. 可视化检查

可以使用rollup-plugin-visualizer库可视化查看各个模块大小,进行进一步排查处理。
在vite.config.ts中设置如下:

import { visualizer } from 'rollup-plugin-visualizer'export default defineConfig({plugins: [vue(),visualizer({open: true,})],//...
})

运行后会自动生成可视化分析图。

首屏加载时间性能优化是个需要深入研究的问题,笔者在这方面还非常初级,也非常渴望学习,解决项目中的问题,非常欢迎交流讨论!

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

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

相关文章

MySQL Binlog 监听方案

如果 EmbeddedEngine 类在 debezium-connector-mysql 中不可用&#xff0c;原因是 Debezium 的新版本移除了 EmbeddedEngine。这是因为 Debezium 的架构变更&#xff0c;它现在鼓励使用 Kafka Connect 或 Debezium Server 来处理数据变更事件。 下面是几种替代方法来实现 MySQ…

JSP内置对象、Servlet与MVC

目录 1、JSP内置对象1. 1、**out 对象**1.2、 **request 对象**1.3、 **response 对象**1.4、 **session 对象**1.5、 **application 对象**1.6、 **cookie 对象** 2、Servlet2.1、Servlet 概念2.2、Servlet 体系结构2.3、Servlet 接口2.4、ServletConfig 接口2.5、Servlet 案例…

论文解读 | NeurIPS'24 IRCAN:通过识别和重新加权上下文感知神经元来减轻大语言模型生成中的知识冲突...

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击 阅读原文 观看作者讲解回放&#xff01; 作者简介 史丹&#xff0c;天津大学博士生 内容简介 大语言模型&#xff08;LLM&#xff09;经过海量数据训练后编码了丰富的世界知识。最近的研究表明&#xff0c…

Linux系统操作笔记

防火墙服务&#xff1a; 开启防火墙服务&#xff1a;systemctl start firewalld / service firewalld start 关闭防火墙服务&#xff1a;systemctl stop firewalld / service firewalld stop 禁用防火墙服务&#xff1a;systemctl disable firewalld / service disable stop 开…

大语言模型训练所需的最低显存,联邦大语言模型训练的传输优化技术

联邦大语言模型训练的传输优化技术 目录 联邦大语言模型训练的传输优化技术大语言模型训练所需的最低显存大语言模型训练所需的最低显存 基于模型微调、压缩和分布式并行处理的方法,介绍了相关开源模型及技术应用 核心创新点 多维度优化策略:综合运用基于模型微调、模型压缩和…

(CICD)自动化构建打包、部署(Jenkins + maven+ gitlab+tomcat)

一、平滑发布与灰度发布 **什么叫平滑&#xff1a;**在发布的过程中不影响用户的使用&#xff0c;系统不会因发布而暂停对外服务&#xff0c;不会造成用户短暂性无法访问&#xff1b; **什么叫灰度&#xff1a;**发布后让部分用户使用新版本&#xff0c;其它用户使用旧版本&am…

Python 科学计算

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

【pytorch】注意力机制-1

1 注意力提示 1.1 自主性的与非自主性的注意力提示 非自主性提示&#xff1a; 可以简单地使用参数化的全连接层&#xff0c;甚至是非参数化的最大汇聚层或平均汇聚层。 自主性提示 注意力机制与全连接层或汇聚层区别开来。在注意力机制的背景下&#xff0c;自主性提示被称为查…

『SQLite』详解运算符

内容摘要&#xff1a;本节讲解运算符&#xff0c;包括&#xff1a;算术运算符、比较运算符、逻辑运算符和位运算符。 什么是运算符&#xff1f; 运算符是一个保留字或字符&#xff0c;主要用于 SQLite 语句的 WHERE 子句中执行操作。它用于指定 SQLite 语句中的条件&#xff0…

Qt窗口获取Tftpd32_svc服务下载信息

前言 一个由Qt开发的Windows小工具需要布置Tftp协议服务端来支持设备下载数据&#xff0c;并显示下载列表&#xff08;进度、下载源等&#xff09;。 考虑开发方便&#xff0c;优先使用了Qtftp方案&#xff0c;经测试发现&#xff0c;不够稳定&#xff0c;会有下载超时的情况&a…

<OS 有关> DOS 批处理命令文件,用于创建 python 虚拟机,并进入虚拟机状态执行后继命令 判断虚拟机是否存在,在批处理文件中自定义 虚拟机名字

前言&#xff1a; 经常要敲重复的命令&#xff1a; python -m venv venv.\venv\Scripts\activate.bat (虽然能按 Tab 省几下&#xff0c;多了也烦恼&#xff0c;后来写了四行脚本 start.bat) DOS批处理 create_venv_start.bat 功能&#xff1a; 批处理显示支持中文在 creat…

[python3]Excel解析库-openpyxl

https://openpyxl.readthedocs.io/en/stable/ openpyxl 是一个用于读写 Excel 2010 xlsx/xlsm/xltx/xltm 文件的 Python 库。它允许开发者创建、修改和保存电子表格&#xff0c;而无需依赖 Microsoft Excel 软件本身。openpyxl 支持读取和写入 Excel 的工作簿&#xff08;Work…

【算法刷题】leetcode hot 100 哈希篇

文章目录 1. 两数之和49. 字母异位词分组128. 最长连续序列总结 1. 两数之和 leetcode&#xff1a;https://leetcode.cn/problems/two-sum/description/?envTypestudy-plan-v2&envIdtop-100-liked暴力解决&#xff1a; public int[] twoSum(int[] nums, int target) {for …

iOS 逆向学习 - iOS Architecture Cocoa Touch Layer

iOS 逆向学习 - iOS Architecture Cocoa Touch Layer 一、Cocoa Touch Layer 简介二、Cocoa Touch Layer 的核心功能1. UIKit2. Event Handling&#xff08;事件处理&#xff09;3. Multitasking&#xff08;多任务处理&#xff09;4. Push Notifications&#xff08;推送通知&…

java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter

今天在朋友机子上运行代码&#xff0c;在生成token的时候&#xff0c;遇到了这样一个问题&#xff1a; Caused by: java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter at io.jsonwebtoken.impl.Base64Codec.decode(Base64Codec.java:26) ~[jjwt-0.9.1.jar:0.…

从0搭建DataSphereStudio保姆级教程--复制粘贴即用(hadoop2.7.2、hive2.3.3、spark2.4.5)

centos7 部署Hadoop 2.7.2 前置&#xff1a;配置好免密登录 1、安装JDK1.8 yum -y install java-1.8.0-openjdk*#验证 java -version2、下载Hadoop2.7.2安装包及解压(可提前下载好直接上传&#xff09; mkdir /opt/server mkdir /opt/software cd /opt/software wget http:…

网站常用功能模块-鉴权

一&#xff1a;JWT是什么&#xff1f; 常用鉴权方式有很多种&#xff0c;今天主要介绍基于token的鉴权方式JWT&#xff08;Json JSON Web Token&#xff09;。因为这种方式实现起来方便快捷。整体实现逻辑如下 第一次登陆时&#xff0c;前端携带账号和密码请求登录接口。服务…

Colyseus 与 HTTP API 的集成

Colyseus 与 HTTP API 的集成 在使用 Colyseus 开发实时多人应用时&#xff0c;通常需要与传统的 HTTP API 集成&#xff0c;例如用户身份验证、存储游戏数据、获取排行榜等。以下是 Colyseus 与 HTTP API 集成的详细介绍&#xff1a; 1. Colyseus 的基本架构 Colyseus 是一个…

asp.net core mvc的 ViewBag , ViewData , Module ,TempData

在 ASP.NET MVC 和 ASP.NET Core MVC 中&#xff0c;ViewBag 和 ViewData 是两种用于将数据从控制器传递到视图&#xff08;View&#xff09;的常用方法。它们都允许控制器将动态数据传递给视图&#xff0c;但它们的实现方式有所不同。关于 Module&#xff0c;它通常指的是某种…

stm32的掉电检测机制——PVD

有时在一些应用中&#xff0c;我们需要检测系统是否掉电了&#xff0c;或者要在掉电的瞬间需要做一些处理。 STM32内部自带PVD功能&#xff0c;用于对MCU供电电压VDD进行监控。 STM32就有这样的掉电检测机制——PVD(Programmable Voltage Detecter)&#xff0c;即可编程电压检…