如何在基于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
}
})
]
}
}
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; }
.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>
<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。
了解新钛云服
往期技术干货
点👇分享
戳👇在看
关键词
图片
文件
精灵
架构
技术
最新评论
推荐文章
作者最新文章
你可能感兴趣的文章
Copyright Disclaimer: The copyright of contents (including texts, images, videos and audios) posted above belong to the User who shared or the third-party website which the User shared from. If you found your copyright have been infringed, please send a DMCA takedown notice to [email protected]. For more detail of the source, please click on the button "Read Original Post" below. For other communications, please send to [email protected].
版权声明:以上内容为用户推荐收藏至CareerEngine平台,其内容(含文字、图片、视频、音频等)及知识版权均属用户或用户转发自的第三方网站,如涉嫌侵权,请通知[email protected]进行信息删除。如需查看信息来源,请点击“查看原文”。如需洽谈其它事宜,请联系[email protected]。
版权声明:以上内容为用户推荐收藏至CareerEngine平台,其内容(含文字、图片、视频、音频等)及知识版权均属用户或用户转发自的第三方网站,如涉嫌侵权,请通知[email protected]进行信息删除。如需查看信息来源,请点击“查看原文”。如需洽谈其它事宜,请联系[email protected]。