[68/100] 技术文章：前端无感知升级支持webp图片系统

前面写了一篇文章，webp在项目中的实践 整个改造的过程非常麻烦，涉及nginx设置cookie，前端检测判断webp的兼容性，然后样式如何书写，html中的图片如何书写等问题。一方面对前端团队而言是非常复杂的一个过程，涉及到历史资源都非常难以处理。那么有没有更优雅的技术方案，既能利用webp图片的优越性，又能免去繁琐的改造过程呢？答案是有的。

下面将实现一个无感知升级支持webp图片的办法。

实现代码的核心逻辑在于nginx层。
实现的基本方法就是通过正则匹配图片的扩展名称，并尝试rewrite到webp的图片地址。如果支持那么尝试重定向到webp图片类型的图片，再用另一个正则去匹配webp图片类型的请求，如果图片不存在就用lua去生成webp的图片，并保存。有一点需要注意nginx需要有写入的权限。通过这样的处理，在支持webp图片格式上就无需前端的任何代码改造了。

nginx代码

 map $http_accept $webp_suffix {
        default   "";
        "~*webp"  ".webp";
}
server {
    listen       80;
    server_name  webp.leewr.com;
    root         /home/leewr/mono/app/public/december;
    location ~* ^(.+\.(jpg|png|jpeg|gig))$ {
       if ($webp_suffix !~* "webp") {
         break;
       }
       rewrite ^(.+\.(jpg|png|jpeg|gif))$  $uri$webp_suffix  last;
    }
    location ~* ^(.+\.(jpg|png|jpeg|gif))(.webp)$ { # 正则匹配图片 paht/name.jpg.webp 格式的图片请求
        if (!-f $request_filename) { # 如果图片不存在
            access_log /usr/local/nginx/logs/december.log main; # 设置日志文件
            set $request_filepath /home/leewr/mono/app/public/december/$1; # 图片真实路径变量
            set $ext $3; # 设置图片扩展名$ext变量
            content_by_lua_file lua/webp.lua; # 调用nginx/lua目录下的webp.lua文件
        }
    }
}

另外附上webp.lua的代码，只是利用了imageMagic的图片格式转换功能。

local command
command = "convert " ..ngx.var.request_filepath.. " " ..ngx.var.request_filepath..ngx.var.ext
os.execute(command)
ngx.exec(ngx.var.request_uri)

通过这样的改造，前端不需要对原有代码进行任何的改造。和最开始的实践方法相比，无需要处理sass、gulp、js等等。改实践已经应用在自我的站点 webp.leewr.com 上。页面代码、nginx、webp.lua 等都已经上传到github上。

最后如果项目采用这样的方式处理，那么在分布式部署的环境下如何处理？对于这块希望以后继续尝试。