WebP 解決方案

啟用 webp:

1. 打開 .tmtworkflowrc, 開啟配置：

{
  "supportWebp": true
}

2. 執(zhí)行 gulp build_dist 即可

webp 的實(shí)現(xiàn)流程

1. 將 sprite 和 img 目錄下的圖片轉(zhuǎn)換成 .webp 格式
2. 將轉(zhuǎn)換后的 .webp 文件和原文件作比較，找出最小文件(有些轉(zhuǎn)換后比原文件大)
3. 生成 .webp.css 文件，里面調(diào)用的都是最小文件
4. 將 html 引用的 css 地址緩存，并插入 webp 相關(guān)的 JS，瀏覽器加載的時(shí)候，這段 JS 會(huì)預(yù)先判斷瀏覽器是否支持 webp，是的話再將 css 地址切換成對(duì)應(yīng)的 .css 或 .webp.css

此為 webp 在前端應(yīng)用中的常見(jiàn)解決方案，個(gè)人可以根據(jù)實(shí)際情況作相應(yīng)調(diào)整。