在项目的开发中其实对于小素材的使用优化,有几种不同的方法
已经将写成了 loader : https://www.npmjs.com/package/cssprite-loader
git : https://github.com/soGooday/cssprite-loaderr
分别是
- 使用base64 这个的好处是直接与文本在一起,减少向服务器段请求资源的链接通信的时间。不好的是每次刷新页面,都会冲i重新下载刷新。
- 使用icon小图标,这个的方式也是大家采用的,但是只用于icon小图标,对于大一些的素材,来说并不能使用
- 使用SVG素材,优势1任意放缩 2文本独立 3较小文件 4超强显示效果 svg不是所有浏览器都能支持,点击这里查看兼容性
- 就是雪碧图是的使用,将小的素材打包成为一张图片,然后使用图片上的素材,好处是减少向服务端请求的数量,加快首屏
准备
- 本文假设你已经熟悉怎么去书写有个webpacak的loader ,其实不会也没有关系,因为挺简单的,webpack看下了解思路就好
- 我们需要使用到 spritesmith 这个是他的git ,这个是他的npm
- loader中的 this.context 指的是资源的路径最外层路径,不是webpack的根路径
- loader中的 this.resourcePath 指被处理的文件的路径
- 对正则表达式的基本使用
需求
我们的需求是 在css中使用了 url(../img/test.png?sp_1) 发现?后面是一个文本的,则我们就认为这个是被放图p_1.png的雪碧图中的小碎图
没有则认为不需要放入雪碧图中。同时需要强调的是,我们需要?可以随意是sp_1也可以是sp_2或者其他什么的,可以没有,可以一个,也可是共存多个(但是在一个url(../img/test.png?sp_1)只能存在一个?,不能是url(../img/test.png?sp_1)?sp_2)之所以这样是,是因为那样我们就没办法区分,这个图片到底要被打成哪张的雪碧图)
比较
这个是原始的代码,也就是需要处理的代码
#one1{
width: 321px;
height: 83px;
background: url(./img/results-btn-y.png?sp_1);
background-repeat: no-repeat;
}
#one2{
width: 285px;
height: 77px;
background: url(./img/reward-btn-1-1.png?sp_1);
background-repeat: no-repeat;
}
#one3{
width: 285px;
height: 77px;
background: url(./img/reward-btn-1-2.png?sp_2);
background-repeat: no-repeat;
}
#one4{
width: 285px;
height: 77px;
background: url(./img/reward-btn-2-1.png);
background-repeat: no-repeat;
}
最终转化为如下css的代码
#one1{
width: 321px;
height: 83px;
background: url(img/sp_1.png) 0px -0px;
background-size: 321px 160px;
background-repeat: no-repeat;
}
#one2{
width: 285px;
height: 77px;
background: url(img/sp_1.png) 0px -83px;
background-size: 321px 160px;
background-repeat: no-repeat;
}
#one3{
width: 285px;
height: 77px;
background: url(img/sp_2.png) 0px -0px;
background-size: 285px 77px;;
background-repeat: no-repeat;
}
#one4{
width: 285px;
height: 77px;
background: url(img/reward-btn-2-1.png);
background-repeat: no-repeat;
}
思路
1,我们这个这个loader,一定要放在紧接着cssl-loader的后。然后我们能取到最纯正的css文本,因为有些是有使用less与sass的预编译的。
2,取到文本通过对url的解析从而拿到。那些存在url的css的{}中的样式内容
3,取到样式内容之后,我们需要将其中的路径取出来。这样我们就能配合this.context,就能知道当前的图片在什么位置。
dome代码已经完成了,但是我需要将这个功能与我们的框架匹配起来。此文章会继续往后写的