通过优化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="颜色" = 给这个星星上色(就像换"酱料")

实际效果 📈

先前使用 v-for 的大小:

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

  • 11.80 KiB9.46 KiB
  • 减少了:2.34 KiB (约 19.8% )

特别适合:

  1. 低网速环境下的应用
  2. 对性能敏感的场景

参考资料

css-tricks.com/too-many-sv...

相关推荐
Cacciatore->9 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~10 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo11 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末30 分钟前
React——基础
前端·react.js·前端框架
aklry42 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos