WebP 解決方案

2018-11-15 16:56 更新

啟用 webp:

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

{
  "supportWebp": true
}

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

webp 的實現(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,瀏覽器加載的時候,這段 JS 會預(yù)先判斷瀏覽器是否支持 webp,是的話再將 css 地址切換成對應(yīng)的 .css 或 .webp.css

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

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號