前言

網站開發時，我們會使用會多小圖示，很多小圖示的呼叫一直都是個問題。

小圖示使用方法

圖示字型（例如:阿里出品的iconfont）雪碧圖（CSS Sprite）等等...

雪碧圖（CSS雪碧）

CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。

雪碧圖優點

1. 減少載入網頁圖片時對伺服器的請求次數

可以合併多數背景圖片和小圖示，方便在任何位置使用，這樣不同位置的請求只需要呼叫一個圖片，從而減少對伺服器的請求次數，降低伺服器壓力，同時提高了頁面的載入速度，節約伺服器的流量

2. 提高頁面的載入速度

sprite 技術的其中一個好處是圖片的載入時間(在有許多 sprite 時，單張圖片的載入時間)；單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。

生成雪碧圖

PhotoShop（傻瓜方式）

通過PhotoShop把圖片合成一張大圖，讓後手動寫css，定位到圖示

Gulp生成雪碧圖（專案連結）

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function() {
    // var DEST_NAME = args[1];
    var spriteData = gulp.src('src/sprite-images/*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css',
        imgPath: '../images/sprite.png'
    }));
    spriteData.css.pipe(gulp.dest('public/styles'));
    spriteData.img.pipe(gulp.dest('public/images'));
});
 

合併前

合併後

Webpack生成雪碧圖（專案連結）

var SpritesmithPlugin = require('webpack-spritesmith');

module.exports = {
    plugins: [
        new SpritesmithPlugin({
            src: {
                cwd: 'src/sprite-images',
                glob: '*.png'
            },
            target: {
                image: 'public/images/sprite.png',
                css: 'public/styles/sprite.css'
            },
            apiOptions: {
                cssImageRef: "../images/sprite.png"
            }
        })
    ]
}
 

相關NPM庫