WebP solution

Enable webp:

1. Open .tmtworkflowrc, open the configuration:

{  "supportWebp": true}

2. Execute gulp build_dist

Webp implementation process

1. Convert the images in the sprite and img directories into .webp format
2. Compare the converted .webp file with the original file to find the smallest file (some are larger than the original file after conversion)
3. Generate the .webp.css file, which calls all the smallest files
4. Cache the css address referenced by html and insert webp-related JS. When the browser loads, this JS will pre-determine whether the browser supports webp. If so, switch the css address to the corresponding .css or .webp. .css

This is a common solution for webp in front-end applications. Individuals can make corresponding adjustments according to the actual situation.