WeFlow幫助文檔
/ WebP 解決方案
WebP 解決方案
啟用 webp:
1. 打開 .tmtworkflowrc
, 開啟配置:
{ "supportWebp": true}
2. 執(zhí)行 gulp build_dist
即可
webp 的實現(xiàn)流程
- 將 sprite 和 img 目錄下的圖片轉換成 .webp 格式
- 將轉換后的 .webp 文件和原文件作比較,找出最小文件(有些轉換后比原文件大)
- 生成 .webp.css 文件,里面調用的都是最小文件
- 將 html 引用的 css 地址緩存,并插入 webp 相關的 JS,瀏覽器加載的時候,這段 JS 會預先判斷瀏覽器是否支持 webp,是的話再將 css 地址切換成對應的 .css 或 .webp.css
此為 webp 在前端應用中的常見解決方案,個人可以根據實際情況作相應調整。