WebP 솔루션


webp 활성화:

1. .tmtworkflowrc를 열고 구성을 엽니다: .tmtworkflowrc, 开启配置：

{  "supportWebp": true}

2. 执行 gulp build_distrrreee

2. gulp build_dist를 실행하면 끝입니다

webp 프로세스
  1. sprite 및 img 디렉터리의 이미지를 .webp 형식으로 변환
  2. 변환된 .webp 파일을 원본 파일과 비교하여 가장 작은 파일을 찾습니다(일부는 변환 후 원본 파일보다 큽니다)
  3. .webp 생성 .css 파일, html에서 참조하는 CSS 주소를 캐시하고 webp 관련 JS를 삽입합니다. 브라우저가 로드되면 이 JS는 브라우저가 webp를 지원하는지 여부를 미리 결정합니다. 그렇다면 CSS는 주소를 전환합니다. 해당 .css 또는 .webp.css
이것은 프런트 엔드 애플리케이션의 webp에 대한 일반적인 솔루션입니다. 개인은 실제 상황에 따라 해당 조정을 할 수 있습니다.

←
→