webpack sprite-loader, 轻松生成精灵图
发布于 7 年前 作者 vinnyguitar 10178 次浏览 来自 分享

github: https://github.com/youzan/sprite-loader

精灵图(图片合并)是一种基本的前端优化手段。虽然svg使用越来越多,但图片还是有自己的适用场景和优势。

  1. 不需要矢量源(一些较复杂的图,画成矢量是非常麻烦的)。
  2. 兼容性非常好。
  3. 当页面有大量的图标时,图片的性能好过svg。
  4. 小图的图片比svg小。

手动制作精灵图繁琐且后期维护麻烦,这种重复性的工作当然最适合交给机器去做。目前社区有很多自动合并精灵图的工具,如:compass、sprity、postcss-sprites、ispriter等。但是在webpack生态里,还没找到一个比较满意的工具。它们大多需要全局指定一个目录进行合并,这不符合webpack模块化的哲学,且笼统的合并会将当前用不到的图片合并进来,反而增加了网络请求。在webpack里应该用loader来做这个事情,天生模块化并且好扩展,于是有了sprite-loader

sprite-loader的使用非常简单,对开发几乎透明。欢迎大家过来点赞和吐槽。

3 回复

点了个星星,以后再看,之前想找个类似工具没找到,最近又没用 webpack

欢迎使用,多提建议

正在项目中使用,用起来很简单,感谢分享。

回到顶部