雪碧圖制作及使用

制作目的：由於網站上有需要小的icon且每次加載的時候都會有許多類似的請求，影響了網站的性能。所以將小圖標合並成一張雪碧圖，從而減少圖片的請求數，優化網站性能。

制作方法：

1、刀耕火種法
利用photoshop把一張張小圖合成一張雪碧圖（工作效率太低不建議使用）；

2、機械生產法：
利用在線生成工具生成雪碧圖：
工具地址：http://csssprites.com/；http://alloyteam.github.io/gopng/；

將要合成的圖片添加到工具裏已經合成，然後下載css和png圖片

3、自動合成法：gulp、fis3、webpack打包合成
webpack打包合成：安裝webpack-spritesmith插件對文件進行打包即可生產css文件和png圖片

• 安裝webpack-spritesmith
  npm i webpack-spritesmith –save-dev

• 在webpack.config.js中配置plugins

//聲明插件
const SpritesmithPlugin = require(‘webpack-spritesmith‘);

//配置插件
 plugins:[
    new SpritesmithPlugin({
      src: {
        cwd: path.resolve(__dirname,‘src/ico‘),
        glob: ‘*.png‘
      },
      target: {
        image: path.resolve(__dirname,‘src/assets/sprites.png‘),
        css: path.resolve(__dirname, ‘src/assets/_sprites.css‘)
      },
      apiOptions: {
        cssImageRef: ‘./sprites.png‘
      }
    })
]
 

• webpack執行打包生成文件路徑‘src/assets’下有兩個文件sprites.png、_sprites.css即為所得

網站性能優化之雪碧圖制作