在vue cli 裡使用 css sprite 雪碧圖

Joe Chang

Published in

Coding Hot Pot

Apr 27, 2020

剛踏進前端領域時，前輩建議我可以試試看雪碧圖，恩？雪碧圖？那是什麼東西，簡單來說就是將多張圖片合成一張大圖，減少http request次數，本來30張小圖片要請求30次，現在只要請求一次就大功告成了。

css sprite原理

將多張圖片合併成一張大圖片，再利用css的background-position定位，就可以指定要顯示哪張小圖（顯示大圖的局部）

在很古早的時期，通常是先用photoshop來處理圖片的部分，再用人工的方式來撰寫對應的css(土法煉鋼），不過如果圖片一直不斷增加，真的會吐血，還好近幾年來多了輔助的工具可以幫助我們處理雪碧圖，compass 或是gulp等等都是不錯的選擇，也有線上的網頁可以使用，像是css sprite generator。

近期都是用vue cli + webpack開發，所以就來介紹如何用webpack的套件來製作雪碧圖，首先要先安裝webpack-spritesmith

然後在vue.config.js 設定

var path = require('path');
var SpritesmithPlugin = require('webpack-spritesmith');configureWebpack: config => {
     config.resolve.modules = ['node_modules', './src/assets/'] 
     const Plugins = [
       new SpritesmithPlugin({
         src: {
           cwd: path.resolve(__dirname, './src/assets/sprite/'),
           glob: '*.png'
         },
         target: {
           image: path.resolve(__dirname, './src/assets/sprite.png'),
           css: path.resolve(__dirname, './src/assets/_sprite.scss')
         },
         apiOptions: {
           cssImageRef: '~sprite.png'
         },
         spritesmithOptions: {
           padding: 10
         }
       })
     ]
     config.plugins = [...config.plugins, ...Plugins]
   }

cwd:為圖片素材存放的資料夾

glob:指定來源圖片類型(png、jpg等等)，如果不限定可以寫成＊

target image :輸出大圖到指定的資料夾

target css: 輸出scss（css）到指定的資料夾

padding:設定圖片的間隔

apiOptions cssImageRef： scss 參考圖片的位置

下方為輸出的scss，可以看到用變數的方式來設定圖片的定位

使用方式也很簡單

先在component @import "@/assets/_sprite.scss"，然後在對應的class底下 include sprite的 mixin 並帶入圖片名稱（即為變數名稱）就可以了，如果有用過比較古老的css sprite 都知道還需要設定寬高（設定顯示範圍），不然大圖的其他圖片會露出來，但webpack-spritesmith會自動幫你帶入圖片的width和height ，省下了不少麻煩。

另外要注意，如果檔案名稱有重複的話，生成的變數就會後蓋前。

webpack-spritesmith 也提供了模板的設定有興趣的人可以閱讀官方文件

雖然css sprite的優點不少，但相對的也有他的缺點在，可以看狀況斟酌是否使用。

不適合用於需要自適應的場景（圖片隨著螢幕寬度縮放）
如果圖片需要放大，會有失真問題

在vue cli 裡使用 css sprite 雪碧圖

Written by Joe Chang