雪碧图PHP,Webpack中雪碧图插件使用详解
背景
在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降。这种情况不符合被广泛遵循的雅虎军规“尽量减少HTTP请求数”的要求(雅虎前端优化的35条军规)。
为了避免这种情况,我们需要使用到雪碧图将这些图标整合到一张图片上,再使用CSS背景及其定位,将需要显示的图标移动到元素背景中。
传统方式,我们需要将图标拼接到一张图片上,计算好位置信息,这种方式维护起来比较麻烦。自从有了打包工具grunt、gulp和webpack之后,这一切似乎容易了许多。这里我重点介绍webpack雪碧图插件webpack-spritesmith的使用。
雪碧图插件 webpack-spritesmith 详解
本人是在 vue-cli 中增加了该雪碧图插件,关键步骤如下,细节上以 vue-cli 为背景,其他框架类似配置。
1. 安装配置
首先在项目中按照官方说明 install之后,在bulid/webpack.base.conf.js中进行如下配置。需要说明的是,雪碧图是开发模式和生产模式都要使用的功能,因此我们在 webpack 的基础配置中进行设置。
1.1 首先引入插件 const SpritesmithPlugin = require('webpack-spritesmith');;
1.2 其次在module.rules将 png 图标的默认配置注释掉,避免 url-loader 将其编译成行内图片,同时单独设置 png 图标的配置,如下:
{
// test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 注释掉原有配置,去掉对png图标的匹配
test: /\.(jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
// 对图标单独设置,以便生成雪碧图
{
test: /\.png$/,
loaders: [
'file-loader' // 使用 file-loader 对 png 图标进行设置
]
},
1.3 接着在 webpack 的配置对象中找到 plugins 属性(没有请自行创建),添加雪碧图的处理。基本配置如下:
plugins: [
// 雪碧图设置
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, '../src/assets/images/icons/'), // 图标根路径
glob: '**/*.png' // 匹配任意 png 图标
},
target: {
image: path.resolve(__dirname, '../src/assets/css/sprites-generated.png'), // 生成雪碧图目标路径与名称
// 设置生成CSS背景及其定位的文件或方式
css: [
[path.resolve(__dirname, '../src/assets/css/sprites-generated.css'), {
format: 'function_based_template'
}]
]
// css: path.resolve(__dirname, '../src/assets/spritesmith-generated/sprite.less')
},
customTemplates: {
'function_based_template': templateFunction,
},
apiOptions: {
cssImageRef: "./sprites-generated.png", // css文件中引用雪碧图的相对位置路径配置
},
})
],
这里我使用的是CSS定制方式,即在target.css中,配置对应的format函数名function_based_template(注意数组元素的层次关系,切勿配错)。然后在 customTemplates中配置对应名称的属性名。
这里我引用了自定义函数 templateFunction,该函数基本参考了官方示例。由于本人使用的是二倍图,所以此处使用了图片缩放和垂直居中的方式。大家选择参考:
const templateFunction = function (data) {
// console.log(data.sprites);
const shared = '.w-icon { background-image: url(I); }'
.replace('I', data.sprites[0].image);
// 注意:此处默认图标使用的是二倍图
const perSprite = data.sprites.map(function (sprite) {
// background-size: SWpx SHpx;
return '.w-icon-N { width: SWpx; height: SHpx; }\n.w-icon-N .w-icon, .w-icon-N.w-icon { width: Wpx; height: Hpx; background-position: Xpx Ypx; margin-top: -SHpx; margin-left: -SWpx; } '
.replace(/N/g, sprite.name)
.replace(/SW/g, sprite.width / 2)
.replace(/SH/g, sprite.height / 2)
.replace(/W/g, sprite.width)
.replace(/H/g, sprite.height)
.replace(/X/g, sprite.offset_x)
.replace(/Y/g, sprite.offset_y);
}).join('\n');
return shared + '\n' + perSprite;
};
其实关键之处就是利用定制函数,将参数中每个图标的信息用来进行样式的定制。这些信息中包括图标名、宽高和在雪碧图中的位置信息等。
当然我们也可以将目标生成成 less 文件,然后再进行使用(示例代码中注释部分)。但本人发现会生成大量变量,而这些变量我们并不经常使用,所以本人没有采用这种方式。
2. 使用方法
进行完上述配置之后,再在我们配置的源文件夹中添加我们需要处理的图标。然后启动 vue-cli 的开发者模式 npm run start(其他框架,运行对应命令)。
启动完成之后,我们可以发现在目标目录下生成了 sprites-generated.png 和 sprites-generated.css 两个文件。在样式文件中,形如:
.w-icon { background-image: url(./sprites-generated.png); }
.w-icon-apply { width: 25.5px; height: 27px; }
.w-icon-apply .w-icon, .w-icon-apply.w-icon { width: 51px; height: 54px; background-position: -208px -58px; margin-top: -27px; margin-left: -25.5px; }
接下来就是在使用组件中引用上述样式即可。
3.遇到的问题
3.1 放大页面时,有些雪碧图标边缘出现相邻图标的边缘,从而出现白线,怎么破?
做完雪碧图之后,高高兴兴的拿给UI参看一下,没过多久就被鄙视了:怎么页面放大时,旁边有一条白线?
纳尼?怎么可能啊!仔细一看,放大之后有些图标周边出现一些线条,而有些图标则没有。而不放大时,则没有这种情况。
难道是其他图表也显示进来了?再回去看看生成的雪碧图,果然是一个图标一个图标的紧紧的靠在一起,即图标之间没有空隙。而且有些图标计算的结果有 .5px ,我们知道有些浏览器会解析成1px,从而出现上述问题,瞬间恍然大悟。
于是仔细翻阅官方说明,其中提到核心组件是 spritesmith and spritesheet-templates ,于是进入 spritesmith 插件中查阅,发现果然有关于边距问题的描述和解决方法 spritesmith: padding。
可是在 webpack-spritesmith 又该怎么使用呢?
查阅 webpack-spritesmith 源代码和文档,发现:spritesmithOptions - optional. Options for spritesmith
好的,就是你啦!然后在 webpack 配置文件中,增加 padding 属性,这里单位为 px:
plugins: [
// 雪碧图设置
new SpritesmithPlugin({
// ... 省略其他配置
// 核心组件配置
spritesmithOptions: {
padding: 4,
}
})
],
重新启动项目编译,打开雪碧图和样式,发现图标之间有间隙了,且放大页面后,图标边缘也没有出现白线问题。好了,搞定!
总结
有了这个插件之后,我们就可以在配置目录下动态添加图标,此时webpack 会立即重新编译生成新的雪碧图和对应样式,这样我们就可以在页面上立刻使用对应图标,再也不用担心自己设置的 background-position 有不对的地方了。好了,Have Fun!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持聚米学院。
雪碧图PHP,Webpack中雪碧图插件使用详解相关推荐
- 在html中雪碧图的坐标怎么看,Webpack中雪碧图使用详解
背景 在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况 ...
- webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
- 【图论】图,实现图(三种方式),二分图 详解
目录 一.图的基本概念 1.度 2.连通 (1)连通图 (2)强连通/强连通图 3.回路 4.完全图 二. 邻接矩阵实现图 三.邻接表实现图 四.链式前向星实现图 五. 二分图 概述 1.简单应用-二 ...
- 强化学习、联邦学习、图神经网络,飞桨全新工具组件详解
2019-12-05 14:55:36 机器之心发布 机器之心编辑部 11 月 5 日,在 Wave Summit+2019 秋季深度学习开发者峰会上,飞桨全新发布和重要升级了最新的 21 项进展,在 ...
- 神经网络代码解读_强化学习、联邦学习、图神经网络,飞桨全新工具组件详解...
机器之心发布机器之心编辑部 11 月 5 日,在 Wave Summit+2019 秋季深度学习开发者峰会上,飞桨全新发布和重要升级了最新的 21 项进展,在深度学习开发者社区引起了巨大的反响. 很多 ...
- 【图割】最大流/最小割算法详解(Yuri Boykov and Vladimir Kolmogorov,2004 )
本博客主要翻译了Yuri Boykov and Vladimir Kolmogorov在2004年发表的改进最大流最小割算法用于计算机视觉的论文:An Experimental Comparison ...
- 思维导图软件MindManager导出Word文档功能详解
Mindmanager思维导图软件作为一款能与Microsoft office软件无缝集成的思维导图软件,支持Word文档的快速导入与导出,并支持Word文档的目录生成.模板套用等,极大地方便了用户完 ...
- ❤️思维导图整理大厂面试高频数组: 两万字详解各种数组求和(建议收藏)❤️
此专栏文章是对力扣上算法题目各种方法的总结和归纳, 整理出最重要的思路和知识重点并以思维导图形式呈现, 当然也会加上我对导图的详解. 目的是为了更方便快捷的记忆和回忆算法重点(不用每次都重复看题解), ...
- 图-贝尔曼福特(Bellman-Ford)算法详解(含全部代码)
目录 适用条件 基本操作函数 功能实现函数 测试使用图 算法讲解 初始化 迭代 贝尔曼福特算法代码 全部代码 实验结果 适用条件 图中可以有负权,但不能有负圈(圈中弧或边的权值之和小于0) 基本操作函 ...
最新文章
- 使用代码配置 NHibernate
- window与共享文件夹访问相关的四个服务
- datagrid分页传递参数_四类数据库分页实现方案总结之Mysql分页实现
- GitHub 大热!也许会成为你心中的OCR开源工具NO1!
- GC garbage collection 垃圾回收机制
- 最优化——线性规划中最大规划和最小规划之间的转换
- linux svn 常用命令
- python写xml文件_用python写xml文件
- QUIC技术创新 让视频和图片分发再提速
- linux 环境下 openssl 生成ecdsa公、私钥
- php手机短信验证码用cookie存好还是session存好,保存登录信息的时候用session好还是cookie好?...
- 多个字段排序_SQL | 汇总分析、排序、运行顺序
- 云锁惊艳亮相2016杭州云栖大会
- 【IoT】产品设计:硬件产品开发流程之ID与MD设计(文字)
- javaweb超市仓库管理系统
- 编程随想 关系图_邹军:想成为编程工程师,玩透数控宏程序编程,这里有一个大招分享给你...
- 动人的牵线美的连接符-两张表的查询(一)
- socketDemo套接字
- 学习编程该如何记笔记(摘自简书、博客)
- Kerberos HA高可用配置
热门文章
- GitHub pages + Hexo 搭建自己的个人博客
- POJ1061 青蛙的约会(扩展欧几里得)题解
- 我们自己搞了个数据库设计工具(客户端)
- F10-MYSQL的yum源码
- mysql 查询条数优化_MySQL优化总结-查询总条数
- aix shell脚本 运行java_IBM AIX shell脚本启动java程序不成功
- mysql怎么同时输入多个值_mysql – 一个字段搜索多个值
- java 事件cancel_Activiti结束事件(End Event)
- 集算器协助MongoDB计算之交叉汇总
- java解析excelpoi_Java解析Excel之POI(一)