webpack 编译打包过程图片没有转成 base64 原因分析
【摘要】 首先解释下base64的目的,其主要是为了减少http请求,转为base64以后小图片可以跟js同时被加载到浏览器,而不需要多次对服务器发出图片资源请求;其次,图片转成base64后,文件体积变大了大约1/3左右。文件的base64编码存储到了js文件中。vue-webpack模板的默认设置限制了转码的文件大小为10000B以下。静态文件目录中的所有文件不会被转码,也就是/static下的所...
首先解释下base64
的目的,其主要是为了减少http
请求,转为base64
以后小图片可以跟js
同时被加载到浏览器,而不需要多次对服务器发出图片资源请求;其次,图片转成base64
后,文件体积变大了大约1/3左右。
- 文件的
base64
编码存储到了js
文件中。 vue-webpack
模板的默认设置限制了转码的文件大小为10000B
以下。- 静态文件目录中的所有文件不会被转码,也就是
/static
下的所有文件都不会被转码。 - 如果所有图片均转码为
base64
,那么很容易造成存储base64
的js
文件过大,一方面会造成资源加载时间过长的白屏问题,另一方面也会给js
解释器带来非常大的负担,这样反而起不到优化的作用,而且会非常影响体验。 - 如果非要让所有图片转为
base64
,可以修改webpack
中的url-loader
配置。
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)