⒕ WEBP 解决方案

hzlzh edited this page Aug 24, 2017 · 5 revisions

查看 demo: http://weflow.io/demo/html/doc.html

启用 webp:

1. 打开 .tmtworkflowrc, 开启配置:

{
  "supportWebp": true
}

2. 执行 gulp build_dist 即可

webp 的实现流程

  1. 将 sprite 和 img 目录下的图片转换成 .webp 格式
  2. 将转换后的 .webp 文件和原文件作比较,找出最小文件(有些转换后比原文件大)
  3. 生成 .webp.css 文件,里面调用的都是最小文件
  4. 将 html 引用的 css 地址缓存,并插入 webp 相关的 JS,浏览器加载的时候,这段 JS 会预先判断浏览器是否支持 webp,是的话再将 css 地址切换成对应的 .css 或 .webp.css

此为 webp 在前端应用中的常见解决方案,个人可以根据实际情况作相应调整。

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.