字玩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,})],//...
})

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

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