webpack之图片打包

1,602 阅读1分钟

1. base64的优缺点:

  • base64减少http请求,转为base64小图片可以跟js同时被加载到浏览器,不需要多次对服务器发出图片资源请求
  • 如果所有图片均转码为base64,那么很容易造成存储base64的js文件过大,一方面会造成资源加载时间过长的白屏问题,另一方面也会给js解释器带来非常大的负担,这样反而起不到优化的作用,而且会非常影响体验

2. url-loader与file-loader的区别:

url-loader可以将图片转为base64字符串,能更快的加载图片,一旦图片过大, 就需要使用file-loader的加载本地图片,故url-loader可以设置图片超过多少字节时,使用file-loader加载图片。

  • url-loader依赖file-loader
  • 当使用url-loader加载图片,图片大小小于上限值,则将图片转base64字符串;否则使用file-loader加载图片,都是为了提高浏览器加载图片速度。
  • 使用url-loader加载图片比file-loader更优秀
  • 若使用url-loader时,配置了limit,即当配置limit上限值,此时url-loader依赖file-loader,否则当图片超过limit时无法打包