字玩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中代码)

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

复制代码

现在更换成：
(main.ts中代码)

1. import { library } from '@fortawesome/fontawesome-svg-core'
2. import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
3. import {
4.         faArrowPointer,
5.         faCircle,
6.         faPercent,
7.         faArrowDownWideShort,
8.         faPenNib,
9.         faSquare,
10.         faDrawPolygon,
11.         faImage,
12.         faFont,
13.         faTerminal,
14.         faSliders,
15.         faTableCells,
16. } from '@fortawesome/free-solid-svg-icons'
17. import {
18.         faHand,
19.         faSquare as faSquare_regular,
20.         faCircle as faCircle_regular,
21. } from '@fortawesome/free-regular-svg-icons'
22. library.add(
23.         faArrowPointer,
24.         faCircle,
25.         faPercent,
26.         faArrowDownWideShort,
27.         faPenNib,
28.         faSquare,
29.         faDrawPolygon,
30.         faImage,
31.         faFont,
32.         faTerminal,
33.         faSliders,
34.         faTableCells,
35.         faHand,
36.         faSquare_regular,
37.         faCircle_regular,
38. )

复制代码

2. Element Icon按需引入

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

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

复制代码

现在更换成：
(main.ts中代码)

1. import { Files, Edit, Upload, Download, Tickets, Setting, List, Tools } from '@element-plus/icons-vue'
3. app.component('Files', Files)
4. app.component('Edit', Edit)
5. app.component('Upload', Upload)
6. app.component('Download', Download)
7. app.component('Tickets', Tickets)
8. app.component('Setting', Setting)
9. app.component('List', List)
10. app.component('Tools', Tools)

复制代码

3. 将首屏不消的代码放到末了，防止壅闭页面

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

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

复制代码

opencv.js是个比较大的库，首屏也不需要用到，就放到了html最底端
4. 加载首屏loading动画

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

1. <div class="empty" style="
2.   position: absolute;
3.   z-index: -99;
4.   top: 0;
5.   left: 0;
6.   right: 0;
7.   bottom: 0;
8.   display: flex;
9.   flex-direction: column;
10.   align-items: center;
11.   justify-content: center;
12. ">
13.   <div class="enpty-tips">首次打开可能会有些慢，感谢耐心等待</div>
14.   <div class="empty-loading" style="
15.     display: flex;
16.     flex-direction: row;
17.     gap: 20px;
18.     align-items: center;
19.     justify-content: center;
20.     margin-top: 48px;
21.   ">
22.     <div class="loading-1" style="
23.       width: 14px;
24.       height: 14px;
25.       border-radius: 50%;
26.       background-color: black;
27.     "></div>
28.     <div class="loading-2" style="
29.       width: 14px;
30.       height: 14px;
31.       border-radius: 50%;
32.       background-color: black;
33.     "></div>
34.     <div class="loading-3" style="
35.       width: 14px;
36.       height: 14px;
37.       border-radius: 50%;
38.       background-color: black;
39.     "></div>
40.   </div>
41. </div>

复制代码

1. <style>
2.   body, html {
3.     width: 100%;
4.     height: 100%;
5.     position: relative;
6.     padding: 0;
7.     margin: 0;
8.     overflow: hidden;
9.   }
10.   .empty {
11.     .empty-loading {
12.       .loading-1 {
13.         animation: loading-1 2s;
14.         animation-iteration-count: infinite;
15.       }
16.       .loading-2 {
17.         animation: loading-2 2s;
18.         animation-iteration-count: infinite;
19.       }
20.       .loading-3 {
21.         animation: loading-3 2s;
22.         animation-iteration-count: infinite;
23.       }
24.     }
25.   }
27.   @keyframes loading-1 {
28.     0% {
29.       opacity: 1;
30.     }
31.     25% {
32.       opacity: 0.5;
33.     }
34.     50% {
35.       opacity: 1;
36.     }
37.   }
39.   @keyframes loading-2 {
40.     0% {
41.       opacity: 1;
42.     }
43.     50% {
44.       opacity: 0.5;
45.     }
46.     75% {
47.       opacity: 1;
48.     }
49.   }
51.   @keyframes loading-3 {
52.     0% {
53.       opacity: 1;
54.     }
55.     75% {
56.       opacity: 0.5;
57.     }
58.     100% {
59.       opacity: 1;
60.     }
61.   }
62. </style>

复制代码

5. treeshaking

vite自动支持treeshaking，可以将步伐中没有引用的模块清撤消，减小终极打包文件大小。
6. 可视化检查

可以利用rollup-plugin-visualizer库可视化检察各个模块大小，举行进一步排查处理。
在vite.config.ts中设置如下：

1. import { visualizer } from 'rollup-plugin-visualizer'
3. export default defineConfig({
4.   plugins: [
5.     vue(),
6.     visualizer({
7.       open: true,
8.     })
9.   ],
10.   //...
11. })

复制代码

运行后会自动生成可视化分析图。
首屏加载时间性能优化是个需要深入研究的问题，笔者在这方面还非常低级，也非常渴望学习，办理项目中的问题，非常欢迎交流讨论！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。