需求
初次打开项目的某个页面时，因为网络等原因，可能会导致包体积过大。
解决方案
准备工作（使用 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()
// 省略其他逻辑
})