在开发过程当中,咱们须要用到不少图标,这些图标的大小不是很大,可是每次须要向服务器发送请求,从而加剧服务器的负担,尤为是当网站处于高访问量的状况下或网络不稳定的时候,服务器性能会明显降低。这种状况不符合被普遍遵循的雅虎军规“尽可能减小HTTP请求数”的要求(雅虎前端优化的35条军规)。
为了不这种状况,咱们须要使用到雪碧图将这些图标整合到一张图片上,再使用CSS背景及其定位,将须要显示的图标移动到元素背景中。
传统方式,咱们须要将图标拼接到一张图片上,计算好位置信息,这种方式维护起来比较麻烦。自从有了打包工具grunt、gulp和webpack以后,这一切彷佛容易了许多。这里我重点介绍webpack雪碧图插件webpack-spritesmith的使用。css
本人是在 vue-cli 中增长了该雪碧图插件,关键步骤以下,细节上以 vue-cli 为背景,其余框架相似配置。html
首先在项目中按照官方说明 install
以后,在 bulid/webpack.base.conf.js
中进行以下配置。须要说明的是,雪碧图是开发模式和生产模式都要使用的功能,所以咱们在 webpack 的基础配置中进行设置。前端
const SpritesmithPlugin = require('webpack-spritesmith');
;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 图标进行设置 ] },
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
,该函数基本参考了官方示例。因为本人使用的是二倍图,因此此处使用了图片缩放和垂直居中的方式。你们选择参考:vue
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 文件,而后再进行使用(示例代码中注释部分)。但本人发现会生成大量变量,而这些变量咱们并不常用,因此本人没有采用这种方式。webpack
进行完上述配置以后,再在咱们配置的源文件夹中添加咱们须要处理的图标。而后启动 vue-cli 的开发者模式 npm run start
(其余框架,运行对应命令)。
启动完成以后,咱们能够发如今目标目录下生成了 sprites-generated.png 和 sprites-generated.css 两个文件。在样式文件中,形如:git
.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; }
接下来就是在使用组件中引用上述样式便可。github
作完雪碧图以后,高高兴兴的拿给UI参看一下,没过多久就被鄙视了:怎么页面放大时,旁边有一条白线?
纳尼?怎么可能啊!仔细一看,放大以后有些图标周边出现一些线条,而有些图标则没有。而不放大时,则没有这种状况。
难道是其余图表也显示进来了?再回去看看生成的雪碧图,果真是一个图标一个图标的牢牢的靠在一块儿,即图标之间没有空隙。并且有些图标计算的结果有 .5px
,咱们知道有些浏览器会解析成1px,从而出现上述问题,瞬间恍然大悟。
因而仔细翻阅官方说明,其中提到核心组件是 spritesmith and spritesheet-templates ,因而进入 spritesmith 插件中查阅,发现果真有关于边距问题的描述和解决方法 spritesmith: padding。
但是在 webpack-spritesmith 又该怎么使用呢?
查阅 webpack-spritesmith 源代码和文档,发现:web
spritesmithOptions - optional. Options for spritesmith
好的,就是你啦!而后在 webpack 配置文件中,增长 padding 属性,这里单位为 px:vue-cli
plugins: [ // 雪碧图设置 new SpritesmithPlugin({ // ... 省略其余配置 // 核心组件配置 spritesmithOptions: { padding: 4, } }) ],
从新启动项目编译,打开雪碧图和样式,发现图标之间有间隙了,且放大页面后,图标边缘也没有出现白线问题。好了,搞定!npm
有了这个插件以后,咱们就能够在配置目录下动态添加图标,此时webpack 会当即从新编译生成新的雪碧图和对应样式,这样咱们就能够在页面上马上使用对应图标,不再用担忧本身设置的 background-position 有不对的地方了。好了,Have Fun!