通过优化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...

相关推荐
CAD老兵6 分钟前
前端 Source Map 原理与结构详解
前端
gnip10 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长21 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_21 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101023 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang23 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi24 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课27 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥28 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101029 分钟前
6-1. 实现 useState
前端