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

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

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

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

这是老师的图的细节。

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

这些代码。

相关推荐
起名时在学Aiifox5 分钟前
前端文件下载功能深度解析:从基础实现到企业级方案
前端·vue.js·typescript
2501_941877981 小时前
从配置热更新到运行时自适应的互联网工程语法演进与多语言实践随笔分享
开发语言·前端·python
云上凯歌1 小时前
01 ruoyi-vue-pro框架架构剖析
前端·vue.js·架构
华仔啊2 小时前
JavaScript 如何准确判断数据类型?5 种方法深度对比
前端·javascript
毕设十刻2 小时前
基于Vue的迅读网上书城22f4d(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
程序员小寒2 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
开发语言·前端·javascript·面试
爱健身的小刘同学3 小时前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js
神秘的猪头3 小时前
Ajax 数据请求:从零开始掌握异步通信
前端·javascript
稀饭523 小时前
用changeset来管理你的npm包版本
前端·npm
TeamDev3 小时前
基于 Angular UI 的 C# 桌面应用
前端·后端·angular.js