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