通过优化SVG 的使用减少打包体积

优化背景

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

最开始我的想法是使用 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="颜色" = 给这个星星上色（就像换"酱料"）