优化背景
最近在开发一个问卷评分功能时,遇到了一个有趣的优化问题。需要实现一个五星评分组件,

最开始我的想法是使用 Vant 组件的Rate 评分 - Vant 4,但在引入了这个组件和对应的样式后,打包体积变得特别大!并且这个星和设计稿还是有很大的出入的,于是这里就想到用 SVG 来解决这个问题
使用 v-for 搭配 svg 来实现效果
HTML
<svg v-for="star in 5" :key="star" width="33" height="32">
<path d="M15.6288 3.54558C16.0114..."
:fill="star <= rateValue ? '#FFA94A' : '#ECEDEF'"/>
</svg>
但这个时候每个星星都完整复制了相同的路径数据 (d="M15.6288 3.54558C16.0114..."
)。路径数据通常很长(约150-300字符),5个星星就重复存储5次
就像我们做汉堡一样,如果要做五个一模一样的汉堡🍔,我们这时候的代码就像这样:
makefile
汉堡1: 面包+牛肉+生菜+番茄+酱料
汉堡2: 面包+牛肉+生菜+番茄+酱料
汉堡3: 面包+牛肉+生菜+番茄+酱料
汉堡4: 面包+牛肉+生菜+番茄+酱料
汉堡5: 面包+牛肉+生菜+番茄+酱料
这相当于每一次都需要重新准备所有的材料!这样会显得非常的重复,那既然都是做汉堡,那为什么我们不弄一个模具,然后再来制作呢?
makefile
模具定义: [面包+牛肉+生菜+番茄+酱料的制作方法]
汉堡1: 用模具 + 普通酱料
汉堡2: 用模具 + 普通酱料
汉堡3: 用模具 + 普通酱料
汉堡4: 用模具 + 特殊酱料 ⭐
汉堡5: 用模具 + 特殊酱料 ⭐
这个时候,我们就可以使用<use>
元素利用SVG的符号复用机制,类似编程中的"变量引用"。浏览器/打包工具只需存储一份路径定义,通过ID引用即可。重复数据会降低压缩效率。独立SVG中大量重复路径数据无法被有效压缩,而复用方案的高重复性数据能被GZIP更好优化
使用use
优化打包体积
定义模具
HTML
<!-- 这就是我们的"星星模具",只定义一次 -->
<svg style="position:absolute;width:0;height:0">
<defs>
<path id="star-path" d="M15.6288..."/>
</defs>
</svg>
使用模具
HTML
<!-- 每个星星都引用同一个模具 -->
<!-- 星星1 -->
<svg>
<use href="#star-path" fill="灰色" />
</svg>
<!-- 星星2 -->
<svg>
<use href="#star-path" fill="橙色" />
</svg>
解释:
1. <use href="#star-path"> = 使用名为"star-path"的模具
2. fill="颜色" = 给这个星星上色(就像换"酱料")
实际效果 📈
先前使用 v-for 的大小:

使用 use 优化后的打包体积:

- 从 11.80 KiB → 9.46 KiB
- 减少了:2.34 KiB (约 19.8% )
特别适合:
- 低网速环境下的应用
- 对性能敏感的场景