怎么做云购网站吗,网站流量监测,答题做任务网站,用html做一个网页字玩FontPlayer开发笔记4 性能优化 首屏加载时间优化
字玩FontPlayer是笔者开源的一款字体设计工具#xff0c;使用Vue3 ElementUI开发#xff0c;源代码#xff1a; github: https://github.com/HiToysMaker/fontplayer gitee: https://gitee.com/toysmaker/fontplayer
…字玩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-iconslibrary.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-vuefor (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-vueapp.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 srclib/opencv.js/scriptopencv.js是个比较大的库首屏也不需要用到就放到了html最底端
4. 加载首屏loading动画
在首屏加载文件白屏时加一个loading动画可以提升用户体验注意loading动画的css最好放在html头部而不能放在外部style.css中防止loading字样已经显示而动画样式还没有加载。
在src/index.html中添加以下代码
div classempty styleposition: absolute;z-index: -99;top: 0;left: 0;right: 0;bottom: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;
div classenpty-tips首次打开可能会有些慢感谢耐心等待/divdiv classempty-loading styledisplay: flex;flex-direction: row;gap: 20px;align-items: center;justify-content: center;margin-top: 48px;div classloading-1 stylewidth: 14px;height: 14px;border-radius: 50%;background-color: black;/divdiv classloading-2 stylewidth: 14px;height: 14px;border-radius: 50%;background-color: black;/divdiv classloading-3 stylewidth: 14px;height: 14px;border-radius: 50%;background-color: black;/div/div
/divstylebody, 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;}}
/style5. treeshaking
vite自动支持treeshaking可以将程序中没有引用的模块清除掉减小最终打包文件大小。
6. 可视化检查
可以使用rollup-plugin-visualizer库可视化查看各个模块大小进行进一步排查处理。 在vite.config.ts中设置如下
import { visualizer } from rollup-plugin-visualizerexport default defineConfig({plugins: [vue(),visualizer({open: true,})],//...
})运行后会自动生成可视化分析图。
首屏加载时间性能优化是个需要深入研究的问题笔者在这方面还非常初级也非常渴望学习解决项目中的问题非常欢迎交流讨论
