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

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

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

npm i webpack-spritesmith

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
              }
          })
      ]
  }
}

//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; }

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