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

相关推荐
陈不知代码11 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记13 分钟前
sass中@mixin与 @include
前端·sass
陈琦鹏20 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante1 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏2 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪3 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾3 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite