背景
由于最近在准备🐧厂的面试，被问及是否知道为什么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主要还是用于打包只有几个像素的小文件比较适合。不会对整体的加载速度有过多的影响。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。