项目性能优化实战：解决首页白屏问题，自定义 loading 动画优化首屏效果

本文主要是介绍项目性能优化实战：解决首页白屏问题，自定义 loading 动画优化首屏效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

初次打开项目的某个页面时，因为网络等原因，可能会导致包体积过大。

解决方案

准备工作（使用 gka 把 gif 转化成 svg）

需要借助 gka 这个工具。这个工具是一键快速图片优化、生成动画文件的。只需要全局安装，配合一些命令，即可将图片转成 canvas/css/svg 动画。
首先，让 UI 把 .gif 动图转换成一系列的图片，每张图片都表示此动画的单帧。然后通过命令gka <文件夹路径> -m true -t svg --minirate 0-20 -s，将动画的单帧合并成一张雪碧图，按一定的压缩比率进行压缩，最后生成 svg 格式的动画文件。
由于文章内容需要脱敏，下面放一个 gka 文档里的图。左边的表示 loading gif 的所有单帧，用 gka 工具后，能压缩成一张雪碧图合配套的 .css 文件，.html 文件为演示这个动画要如何使用。

生成的文件：

单帧 → svg / canvas 动效：
在这里插入图片描述

在项目中使用 svg 动画

首先，需要将 gka 生成的雪碧图和 css 文件，都放在项目的public文件夹下。这次我将雪碧图放在了public\img\loading-sprites.png，css 文件放在了public\static\css\loading.css下。并对 css 文件里的命名做了优化。

.loading-animation {width: 640px;height: 307px;background-image: url("/img/loading-sprites.png");background-repeat: no-repeat;animation-name: keyframes-loading;animation-duration: 2.88s;animation-delay: 0s;animation-iteration-count: infinite;animation-fill-mode: forwards;animation-timing-function: steps(1);
}@keyframes keyframes-loading {0% {width: 640px;height: 307px;background-image: url("/img/loading-sprites.png");}1.39% {background-position: -640px 0px;}2.78% {background-position: -1280px 0px;}4.17% {background-position: -1920px 0px;}5.56% {background-position: -2560px 0px;}/* 此处省略了一些代码 */97.22% {background-position: -44800px 0px;}98.61%,100% {background-position: -45440px 0px;}
}

然后，在入口页 index.html 引入上面提到的 css 文件。
之后，参考 gka 生成的 .html 文件，在页面 body 下添加 svg 元素。让页面一打开，就展示出 loading 的效果，取代原来的白屏。可以通过 svg 标签的 style 属性，指定 width 的值，改变 svg 的大小。

<!DOCTYPE html>
<html lang="zh"><head><!-- 此处省略了其他代码 --><link rel="stylesheet" href="/static/css/loading.css"></head><body><div id="first-loading-wrap" style="display: flex; justify-content: center; align-items: center; height:96vh; z-index: 999;"><svg id="first-loading-svg" viewBox="0, 0, 640, 307" style="width: 320px"><foreignObject id="first-loading-foreignobject" width="640" height="307"><div id="first-loading-content" class="loading-animation"></div></foreignObject></svg></div><div id="app"></div><!-- built files will be auto injected --></body></html>

最后，在路由的afterEach钩子函数里，移除 loading 效果相关的元素即可。

router.afterEach(to => {// 判断是否需要去除 loading 效果document.getElementById('first-loading-wrap')?.remove()document.getElementById('first-loading-svg')?.remove()document.getElementById('first-loading-foreignobject')?.remove()document.getElementById('first-loading-content')?.remove()// 省略其他逻辑
})