背景
因为最近在筹备🐧厂的面试，被问及是否晓得为什么 url-loader 将图片转换成 Base64 后，会有减少 33% 的数据量。因而，我开始从早晨收集这方面的材料，但遗憾的是，大多的博文的关注点根本都是在理论利用 (Webpack, 前端优化 …) 或者是 Base64 如何进行编码，没有很清晰的论述为什么会多出 33% 的数据量的过程和起因。因而，我心愿能够通过这篇博文补充这方面的讯息。
为什么会多出 30% 的数据
当咱们把 3 个 Byte 的数据转换成为 Base64 的字符时，依据 Base64 的规定，3 个 Byte 的字符会转换成 24 个二进制位。Base64 一位只有 6 个位二进制位，因而会产生 4 个 Byte 的字符。
然而古代计算机系统当中，一个字符要有 8 个二进制位来 存储 因而，4 个字符对应的 6 个二进制位都要补充 2 个 0，来转换成 8 个二进制位的字符存储到计算机当中。因而 3 个 Byte(24 位二进制位)的数据要用 4 个 Byte(32 位二进制位)来存储。并且 32 位中只有 24 位是用来存储数据的，剩下 8 位都是无用的补充位。
因而咱们能够很简略的计算出输入: 输出 = 4:3 (33% 数据冗余). 与此同时，咱们同样能够总结出，输出 n Bytes，输入就有 $${\textstyle 4\left\lceil {\frac {n}{3}}\right\rceil }$$ 那么长。
总结
把照片打包进 bundle.js 中，看来还是要就地取材的。url-loader 默认数值应该是 8192bit(1024 byte)，增大 33% 后就是减少了 300byte。因而，url-loader 次要还是用于打包只有几个像素的小文件比拟适宜。不会对整体的加载速度有过多的影响。
援用
https://en.wikipedia.org/wiki…
http://www.ruanyifeng.com/blo…