Vue进阶(五十): vue打包的时候有些图片没有转成base64是怎么回事呢

举报
SHQ5785 发表于 2020/12/29 23:00:11 2020/12/29
【摘要】 首先解释下base64的目的,其主要是为了减少http请求,转为base64以后小图片可以跟js同时被加载到浏览器,而不需要多次对服务器发出图片资源请求;其次,图片转成base64后,文件体积变大了大约1/3左右。 文件的base64编码存储到了js文件中。vue-webpack模板的默认设置限制了转码的文件大小为10000B以下。静态文件目录中的所有文件不会被转码,...

首先解释下base64的目的,其主要是为了减少http请求,转为base64以后小图片可以跟js同时被加载到浏览器,而不需要多次对服务器发出图片资源请求;其次,图片转成base64后,文件体积变大了大约1/3左右。

  • 文件的base64编码存储到了js文件中。
  • vue-webpack模板的默认设置限制了转码的文件大小为10000B以下。
  • 静态文件目录中的所有文件不会被转码,也就是/static下的所有文件都不会被转码。
  • 如果所有图片均转码为base64,那么很容易造成存储base64的js文件过大,一方面会造成资源加载时间过长的白屏问题,另一方面也会给js解释器带来非常大的负担,这样反而起不到优化的作用,而且会非常影响体验。
  • 如果你非要让所有图片转为base64,可以修改webpack中的url-loader配置。

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/89928521

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。