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

    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
    «
    »
以专业成就每一位客户,让企业IT只为效果和安全买单

以专业成就每一位客户,让企业IT只为效果和安全买单