字玩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 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,
})
],
//...
})
运行后会自动生成可视化分析图。
首屏加载时间性能优化是个需要深入研究的问题，笔者在这方面还非常低级，也非常渴望学习，办理项目中的问题，非常欢迎交流讨论！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]