网站性能优化之雪碧图制做

雪碧图制做及使用

制做目的：因为网站上有须要小的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即为所得