前端技巧之svg精灵图svg-sprite-loader

首先说明精灵图的必要性,其可以让我们只需要向服务器请求一次图片资源,就能加载很多图片,即能够减轻http请求造成的服务器压力。

然后这里要说明的是这个插件是webpack上面的,所以在vue2中比较好用,如果在vue3中,可能解决方案就不是这个插件了。

然后,svg的解决方案包含了精灵图和svg的全局组件配置,这里只是一部分,完整版的解决方案还有另一篇。

这是老师的图的细节。

老师没提到上面的部分,然后这里还有我没注意到的细节就是,或许因为这个东西属于是webpack上的,所以在vue.config.js文件中并没有引入这个文件而是直接添加配置项即可。上面的框的意思是不要用默认的svg的方式来解析,下面的框意思是按照我们设置的svg-sprite-loader来将这些图片转成雪碧图。当然,我们想看到效果,可以通过检查浏览器的代码,找到

这些代码。

相关推荐
We་ct5 分钟前
LeetCode 4. 寻找两个正序数组的中位数:二分优化思路详解
前端·数据结构·算法·leetcode·typescript·二分
H@Z*rTE|i9 分钟前
vue首屏加载优化
前端·javascript·vue.js
FreeBuf_10 分钟前
新型开源供应链攻击:虚假 npm 安装日志暗藏 RAT 木马
前端·npm·开源
Irene199111 分钟前
v-model 的本质,defineModel() 是 Vue 3.4 的重大改进
前端·javascript·html5
EF@蛐蛐堂38 分钟前
【vue】Vite 生态 5 个 “新玩具“
前端·javascript·vue.js
风之舞_yjf1 小时前
Vue基础(29)_props配置项、ref属性
前端·vue.js
Fairy要carry1 小时前
项目03-手搓Agent之团队协作(发消息/分配任务)
linux·前端·python
东北甜妹1 小时前
Python脚本
java·开发语言·前端
四千岁1 小时前
WSL + OpenCode 最佳实践:环境一致、模型配置、GUI 远程使用
前端·javascript·后端
ssshooter2 小时前
Tauri 2 Linux 上 asset://localhost 访问返回 403 避坑指南
前端·后端·架构