背景

在開發過程中，我們需要用到很多圖標，這些圖標的大小不是很大，但是每次需要向服務器發送請求，從而加重服務器的負擔，尤其是當網站處于高訪問量的情況下或網絡不穩定的時候，服務器性能會明顯下降。這種情況不符合被廣泛遵循的雅虎軍規“盡量減少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 屬性（沒有請自行創建），添加雪碧圖的處理?；九渲萌缦拢?/p>

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!

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。