如何在基于vue-cli的项目中，使用精灵图 css sprite

新钛云服已为您服务1236天

CSS Sprites通常被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。

就是将多张比较小的图片有规则的合并成一张背景图，然后再利用background-position进行背景图定位的一种技术，也是优化网站性能的重要技术之一，因为项目中小图片都在一张大图里了，请求一次后就不用再次发送HTTP请求去请求图片资源了。

本文介绍如何在Vue-cli创建的项目快速高效的使用这门技术。

首先，要在项目中安装 webpack-spritesmith 这个插件：

npm i webpack-spritesmith

在vue.config.js配置相关参数：

const path = require('path')
const SpritesmithPlugin = require('webpack-spritesmith'); // 引入插件


// 自定义模板样式，默认打包会自动生成一个sprite.css的样式，如果有问题可以在这里修改
var templateFunction = function (data) {
  var shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}'.replace('I', data.sprites[0].image).replace('W', data.spritesheet.width)
    .replace('H', data.spritesheet.height)

  var perSprite = data.sprites.map(function (sprite) {
    return '.icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
      .replace('N', sprite.name)
      .replace('W', sprite.width)
      .replace('H', sprite.height)
      .replace('X', sprite.offset_x)
      .replace('Y', sprite.offset_y);
  }).join('\n');

  return shared + '\n' + perSprite;
};
module.exports = {
    configureWebpack:{
        plugins:[
            new SpritesmithPlugin({
                // 目标小图标
                src: {
                    cwd: path.resolve(__dirname,'./src/assets/sprite'),//小图标的目录
                    glob: '*.png'
                },
                // 输出雪碧图文件及样式文件
                target: {
                    image: path.resolve(__dirname, './src/assets/images/sprite.png'),//生成雪碧图的目录
                    css: [[path.resolve(__dirname, './src/assets/css/sprite.less'),{format:'function_based_template'}]]//生成雪碧图对应的
                },
                customTemplates: {
                  'function_based_template': templateFunction, //模板
                },
                // 样式文件中调用雪碧图地址写法
                apiOptions: {
                    cssImageRef: '../images/sprite.png'//对于雪碧图css对应的雪碧图的相对路径
                },
                spritesmithOptions: {
                    algorithm: 'binary-tree',  // 拼合算法
                    padding:10
                }
            })
        ]
    }
}

这样一来就配置完成了，在启动项目后就会自动拼合./src/assets/sprite目录下小的小图片并生成对应的文件sprite.png 和sprite.less：

//sprite.less
.icon { background-image: url(../images/sprite.png);background-size: 410px 410px;}
.icon-xx1 { width: 200px; height: 200px; background-position: 0px 0px; }
.icon-xx2 { width: 200px; height: 200px; background-position: -210px 0px; }
.icon-xx3 { width: 200px; height: 200px; background-position: 0px -210px; }

最后，在项目的main.js中引入这个样式文件后即可在组件中使用，如下所示：

<template>
<div>
<i class="icon icon-xx1"></i>
<i class="icon icon-xx2"></i>
<i class="icon icon-xx3"></i>
</div>
</template>

其它相关配置参考： https://github.com/mixtur/webpack-spritesmith。

了解新钛云服

新钛云服荣膺第四届FMCG零售消费品行业CIO年会「年度数字化服务最值得信赖品牌奖」

新钛云服三周岁，公司月营收超600万元，定下百年新钛的发展目标

当IPFS遇见云服务|新钛云服与冰河分布式实验室达成战略协议

新钛云服正式获批工信部ISP/IDC(含互联网资源协作)牌照

深耕专业，矗立鳌头，新钛云服获千万Pre-A轮融资

新钛云服，打造最专业的Cloud MSP+，做企业业务和云之间的桥梁

新钛云服一周年，完成两轮融资，服务五十多家客户

上海某仓储物流电子商务公司混合云解决方案

往期技术干货

Kubernetes扩容到7,500节点的历程

低代码开发，全民开发，淘汰职业程序员！

国内主流公有云VPC使用对比及总结

万字长文：云架构设计原则|附PDF下载

刚刚，OpenStack 第 19 个版本来了，附28项特性详细解读！

Ceph OSD故障排除|万字经验总结

七个用于Docker和Kubernetes防护的安全工具

运维人的终身成长，从清单管理开始|万字长文！

OpenStack与ZStack深度对比：架构、部署、计算存储与网络、运维监控等

什么是云原生？

IT混合云战略：是什么、为什么，如何构建？

点????分享

戳????在看