webpack之url-loader

rl-loader对未设置或者小于limit设置的图片进行转换,以base64的格式被img的src所使用;而对于大于limit byte的图片用file-loader进行解析。

webpack.base.conf.js

vue-cli 默认设置10000 是10k,小于10k的图转化为base64;

优点vs缺点

  • 对于比较小的图片,使用base64编码,可以减少一次图片的网络请求;那么对于比较大的图片,使用base64就不适合了,编码会和html混在一起,一方面可读性差,另一方面加大了html页面的大小,反而加大了下载页面的大小,得不偿失了呢,因此设置一个合理的limit是非常有必要的;
  • 另一方面,base64编码的图片不能像正常的图片可以进行缓存,因此写在css里面可以让浏览器对css文件进行缓存也不错哦;

猜你喜欢

转载自blog.csdn.net/qq_16122415/article/details/81477880