webpack中处理样式图片的url-loader配置
module:{
rules:[
{
test: /\.(jpg|png|gif)$/i, //i表示忽略图片格式大小写,例如.PNG
use: [{
loader: 'url-loader', // url-loader依赖于file-loader所以这两个包都需要下载
options:{
limit: 10*1024 //如果图片小于10k,就使用base64处理,
name: '[hash10].[ext]' //取hash值的前10位,[ext]:取原来的扩展名.jpg .png
}
}]
}
]
}
base64
优点
- base64格式的图片是文本格式,降低了资源服务器的损耗。
- 网页中使用base64格式的图片时,不再请求服务器调用图片资源,减少了对服务器的请求次数。
- base64编码的字符串更适合不同平台、不同语言的传输。
缺点
- base64格式的文本内容较多,存储在数据库中增大了数据库的压力
- 网页加载虽然不用再请求服务器了,但是base64格式的内容太多,所以加载网页的速度会降低,可能会影响用户的体验
- base64无法缓存,要缓存只能缓存包含base64的文件,比如js或者css, 这比直接缓存图片要查很多,而且一般html改动比较频繁,所以等同得不到缓存效益
摘抄:base64的优缺点
base64是通过文本记录像素方式来保存图片的,与原有二进制保存图片的方式不同,转码后的图片可能更大
使用base64的不是为了节省存储空间,而是为了减少请求。因为请求不仅耗时而且还费服务器。
这也是为什么,会限制增加limit字段,限制图片在一定的大小内使用base64转码。否则,图片过大,base64后的文本耗内存更大,请求速度更慢,得不偿失。