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!