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

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

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

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

这是老师的图的细节。

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

这些代码。

相关推荐
Csvn14 分钟前
SEO 优化
前端
天外飞雨道沧桑26 分钟前
详解CSS中的Containing Block:概念、规则与实战解析
前端·css
彩票管理中心秘书长30 分钟前
Git 图形化交互工具大全:从官方 GUI 到高级扩展
前端
ID_1800790547333 分钟前
Python 实现京东商品详情 API 数据准确性校验(极简可直接用)
java·前端·python
前端那点事34 分钟前
Vue生命周期速查:Vue2+Vue3钩子全解析,新手也能秒懂
前端·vue.js
陆枫Larry36 分钟前
横向滚动列表紧贴屏幕边缘问题:原理分析与解决方案
前端
JuliusDeng37 分钟前
02. 环境搭建
前端
练习时长一年1 小时前
@NotEmpty注解引发的报错
java·服务器·前端
郝学胜-神的一滴1 小时前
[力扣 227] 双栈妙解表达式计算:从思维逻辑到C++实战,吃透反向波兰式底层原理
java·前端·数据结构·c++·算法
淼淼爱喝水1 小时前
基于DOM型XSS漏洞与利用实验教程
前端·xss·dom·dvwa