Website performance optimization of Sprite chart production

Sprite chart Production and use

Purpose of production: because there is a need for small icon on the site, and each time there are many similar requests, affecting the performance of the site. So the small icons are combined into a sprite chart, which reduces the number of requests for images and optimizes site performance.

Production method:

1. Slash and burn law
Use Photoshop to synthesize a small picture of a sprite (inefficient work is not recommended);

2, Mechanical production method:
Generate Sprite graphs with online generation tools:
Tool Address: http://csssprites.com/;http://alloyteam.github.io/gopng/;

Add the image you want to synthesize into the tool, and then download the CSS and PNG images.

3, Automatic synthesis method: Gulp, FIS3, webpack packaging synthesis
Webpack Package Synthesis: Install the Webpack-spritesmith plugin to package files to produce CSS files and PNG images

• Installing Webpack-spritesmith
  NPM I Webpack-spritesmith–save-dev

• Configuring Plugins in Webpack.config.js

//声明插件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 Execute Package build file path ' Src/assets ' with two files sprites.png, _sprites.css is the resulting

Website performance optimization of Sprite chart production