網站性能優化之雪碧圖製做

雪碧圖製做及使用

製做目的：因爲網站上有須要小的icon且每次加載的時候都會有許多相似的請求，影響了網站的性能。因此將小圖標合併成一張雪碧圖，從而減小圖片的請求數，優化網站性能。

製做方法：

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

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

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

三、自動合成法：gulp、fis三、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即爲所得