(A) Sprites (background sprite / Sprite FIG)
1 - A sporadic multiple pictures or icons are included inside to a large map, so you only need to load a picture of this, but not a lot of pictures, and thus reducing the number httpof requests
2- with CSS background-image, background- repeat, background-positiona combination of background positioning, background-positionwith the numeric precise positioning of the position of the background image;
(B) base64
1 - A small image is not larger than its threshold value converted into a string of a base64 8192KB;
2- popular speak: original resource will be transferred in the form of a binary string into a string of 64 characters basic unit thereof.
After an image such as a base64 encoding switch like this, image file directly embedded in base64 form;
3- Solution: url-loader webpack can do this, it can convert base64 to limit the size of the picture, very convenient.
4- advantages:
- base64 images will be downloaded together with html or css to the browser, reducing the request.
- To avoid cross-domain issues
5 - Use scenario:
- Applied to small picture a few k's, the picture will be too much size after conversion, more harm than good.
- Some css sprites for unfavorable treatment of small images, such as some of the tiles can be made through the background picture background-repeat.
Note that local 6- Please see, is the threshold (yu) value, do not read as a threshold. Ha ha ha, before attending the wrong, is big cousin meal humiliation. Cankuicankui.
(C) the font icon
The students used the bootstrap certainly impressed convenient fontawesome icon fonts, lossless zoom, you can modify the color, just add a class name you can use the icon, the feeling is not so cool as to advantage is the vector & easy to use.
(D) Vue inside optimization, set up a public address
1- Imagine if everyone's components more, but have to use axios or Ajax request to send back the requested data, copy and paste are we going to do one by one? I took the trouble to do? There is of course a great optimization, as follows:
First wrote here, there is time to add back. . .