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

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

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

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

这是老师的图的细节。

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

这些代码。

相关推荐
一生为追梦1 小时前
Linux 内存管理机制概述
前端·chrome
喝旺仔la2 小时前
使用vue创建项目
前端·javascript·vue.js
心.c2 小时前
植物大战僵尸【源代码分享+核心思路讲解】
前端·javascript·css·数据结构·游戏·html
喝旺仔la2 小时前
Element Plus中button按钮相关大全
前端·javascript·vue.js
柒@宝儿姐2 小时前
Git的下载与安装
前端·javascript·vue.js·git·elementui·visual studio
Hiweir ·2 小时前
机器翻译之数据处理
前端·人工智能·python·rnn·自然语言处理·nlp·机器翻译
曈欣3 小时前
vue 中属性值上变量和字符串怎么拼接
前端·javascript·vue.js
QGC二次开发4 小时前
Vue3:v-model实现组件通信
前端·javascript·vue.js·前端框架·vue·html
努力的小雨5 小时前
从设计到代码:探索高效的前端开发工具与实践
前端
小鼠米奇5 小时前
详解Ajax与axios的区别
前端·javascript·ajax