前端图片导入方式解析众所周知，页面导入图片一般有三种方式：sprite图片、base64inline、普通单图.（canvas、svg等非常规的方法不在本题范围内），下面简单分析一下这三种方法的优缺点：嗯，大体情况是这样的，接下来稍微展开说明一下：base64image本身是不能缓存的，但是base64map一般存在于css中，所以缓存css可以实现间接缓存，所以它的cache属性不是“none”。说它“坏”是因为它没有直接用作图像缓存。当然，如果直接用html写，是不能缓存的，这个要注意。Base64额外增加html/css大小不是主要问题，问题在于由此产生的渲染阻塞有时是致命的！作为图片文件加载时不存在这个问题，因为图片不会阻塞html和css的加载，所以不会影响首屏的渲染。（当然，如果非要在样式前面写img标签，我只能说，兄弟，我服了~~~~）了解了三种方式的优缺点后，简单总结一下使用场景：页面本身唯一的图片全部合并为一张sprite图片。如果公共模块或公共组件包含多张图片，则将它们排列并与自己的精灵图片组合；如果只有一两张图片，或者可以被其他模块、组件、页面复用的图片，灵活性好的是单图模式或者base64模式。但是，这种说法留下了一个问题：比如如果天花板区域有一张所有页面都有的小图，注意，是一张（如果有很多，会被合并）。这样的话，直接导入为单图？还是天花板的css中嵌入了base64？不用担心！接下来我们对base64模式做一个简单的分析：首先要明确我们对base64图片缺点的抱怨，1：Y会增加原始图片文件；2：css植入后，css文件的体积会变大。做一个简单的实验，我用base64编码了几个全局频繁出现的小图标，结果：平均增加了35%但是！gzip压缩后-4%~40%,平均提升22%下面简单总结下不同场景应该使用的图片导入方式：（认真脸-_-！！！）1.通用，非-特定页面或模块的唯一图片通过单张图片或base64导入。两者的区别如下：1.1如果图片被多处使用或者图片本身很大（此类图片总体积大于20kb），使用单图模式1.2如果图片只被使用有几个地方和图片本身比较小（这种图片总体积不到20kb），那么使用base64方式2，图片在publicmodule/component（假设模块名为mod-prd）里面为N(N>inthemodule=3)张图片，全部放入slice/mod/prd，使用sprite图片方式，否则参考全局通用图片处理方法3，页面本身特有的图片，全部合并变成一个精灵图像
