Webpack使用雪碧图优化图片加载示例
如果你在做前端优化，想减少图片求次数，那雪碧图（CSS Sprite）一定是你必备的利器。简单来说，就是将多个小图片合并成一张大图，用background-position来控制显示哪一部分。这样一来，原本几十个求就能变成一个，提升性能的同时也能减少服务器压力。
以公司的需求为例，每个组件下有大量小图标，正常情况每个图片都得发一个求，搞得页面加载慢。用了雪碧图后，所有这些小图标都合成了一张大图，性能提升。
，手动合并图片比较麻烦，所以使用工具就显得重要。目前结合 Webpack 的sprite-loader插件，是简便的实现方式。通过这个插件，你可以轻松地将图片合并，并自动相关的 CSS，免去手动调整的麻烦。
如果你还没有尝试过，强烈建议你试试这个方式，不仅能优化加载速度，代码也比较简洁。Webpack和sprite-loader搭配使用，效果真的蛮不错的。使用时需要注意图片尺寸的匹配，以及background-position的计算。
文件大小：54.57KB
评论区