关于在css背景图中引用webp图片的疑问

Question

最近在做公司现有项目的优化工作，其中一项就是将部分静态资源图从原格式转为webp格式。从而在支持webp的浏览器中输出webp格式的图片。由于项目技术栈是Vue + webpack + less。原先所有的静态资源图基本都走webpack来进行版本管理。如此的话，想通过webpack加上js业务逻辑代码，实现webp格式的图片浏览器全兼容，并没有走通。无奈，只有将所有静态资源图放置在根目录下static目录下，此目录中所有的图片不走webpack处理。因此配合自己的业务代码，可以实现webp全浏览器兼容。但如此操作，因不走webpack，所有这些图片的版本管理也失去了。另一个问题是css中的背景图处理。我用less写了一个方法。参数为图片路径，从而实现以上的兼容效果。但我看了network面板，发现，虽然在支持webp的浏览器中输出的是webp格式图片，但原格式图片也依然被载入并占用一个请求。如此的话，似乎css兼容就做的毫无意义了。不知有没有更好的实践？以下为less代码：

.webpbg(@url) {
  background-image: url(@url);
  .webpa & {
    background-image: url('@{url}.webp');
  }
}

Answer 1

最终我还是采用了另一种方案。在根目录的static目录下新建一个css目录，此目录下保存2份css文件。分别为：picture.css(此样式表只保存所有需要转换为webp图片的原始路径)和webp.css(此样式表只保存所有需要转换为webp图片的webp路径)。然后在index.html的<script>标签里判断浏览器是否支持webp格式，如果支持就载入webp.css，并且在localStorage里埋下webpSupport:true的属性。否则就载入picture.css。下次进入app，只需要判断localStorage下的webpSupport属性，即可加载对应的样式表。此方法的缺点，就是需要额外保存2个样式表文件，来分别保存原格式和webp格式的路径。但是优点是避免了用less的方法，多出了额外的图片请求。以下是index.html中的业务逻辑代码。

(function() {
    let styleTag = document.getElementById('pictureStyle')

    // 判断是否有webpSupporta: true这个storage
    if (!localStorage.getItem('webpSupport')) {
        let image = new Image()

        // 图片加载完成时候的操作
        image.onload = function() {

            // 图片加载成功且宽度为1,那么就代表支持webp了,因为这张base64图是webp格式.如果不支持会触发image.error方法
            if (image.width == 1) {
                localStorage.setItem('webpSupport', true)
                styleTag.setAttribute('href', '/static/css/webp.css')
            } else {
                styleTag.setAttribute('href', '/static/css/picture.css')
            }
        }

        // 一张支持alpha透明度的webp的图片,使用base64编码
        image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA=='
    } else {
        styleTag.setAttribute('href', '/static/css/webp.css')
    }
}())