Vuejs webp支援圖片的插件開發-js教程-PHP中文網

Vuejs webp支援圖片的插件開發

php中世界最好的语言

發布： 2018-03-07 17:41:44

原創

1887 人瀏覽過

這次帶給大家Vuejs webp支援圖片的外掛開發，Vuejs webp外掛開發的注意事項有哪些，以下就是實戰案例，一起來看一下。

本人已經使用vue.js半年多了，在做一些Html5頁面的時候發現很多頁面都是圖片組成的，如果能有效的壓縮圖片的體積那麼整個項目體積就會減少很多，這是為什麼寫這個簡單東西的起點。

Webp 百度百科上已經講清楚在保持原畫質的情況呀體積可以壓縮到原來的60%這是很牛逼的一件事。看看webp的相容情況，下圖是caniuse上面最新的webp支援情況

webp相容情況

Vuejs webp支援圖片的插件開發

##相容情況還是不那麼樂觀，不過chrome和安卓陣營已經全部支援。所以我還是做了這件事。

源碼github

Vue.js 的自訂指令系統十分強大是我做這件事的根本原因之一，所以我的設想是在一個指令中傳入圖片鏈接，然後在頁面渲染的時候根據瀏覽器是否支援webp格式的圖片選擇下載那個圖片，這裡就需要判斷瀏覽器是否支援webp了，這裡我用到的是canvas方法，程式碼如下

var canUseWebp = (function() {  var elem = document.createElement(&#39;canvas&#39;);  if (!!(elem.getContext && elem.getContext(&#39;2d&#39;))) {    return elem.toDataURL(&#39;image/webp&#39;).indexOf(&#39;data:image/webp&#39;) === 0;
  } else {    return false;
  }
})();

登入後複製

這時候就非常簡單了指令在update的時候根據是否支持然後選擇不同的圖片

rrreee

然而事情的這個時候發現一些小的圖標不見了，原來我的webpack配置中設置了小於10k的圖片使用base64編碼，

所以最終我的更新程式碼是這樣的

function update(el, option) {    var attr = option.arg || &#39;src&#39;;    if (el.tagName.toLowerCase() === &#39;img&#39; && option.value) {
        el.setAttribute(attr, option.value);
    }
  };

登入後複製

這時候vue.js 2.0發布了。我針對 2.0版本做了支持，由於我的指令非常簡單，所以程式碼很輕鬆

function update(el, option) {    var attr = option.arg || &#39;src&#39;;    if (el.tagName.toLowerCase() === &#39;img&#39; && option.value) {      if (option.value.indexOf(&#39;data:image&#39;) < 0) {        var tmp = option.value.substring(0, option.value.lastIndexOf(&#39;.&#39;)) + &#39;.webp&#39;;
        el.setAttribute(attr, canUseWebp ? tmp : option.value);
      } else {
        el.setAttribute(attr, option.value);
      }
    }
  };

登入後複製

這樣我的vue-webp指令就算完成了。

只有指令可不行，每次都要自己產生一份webp格式的圖片，這太不友善了。我有查找一番，發現一個webp-loader可以在webpack打包和dev的時候自動產生對應的webp文件，太好了。使用原作者的webp-loader發現檔案的hash不一樣，我又用imagemin最新版本升級了一下，上傳到npm叫webpn-loader(原諒我不會命名)，

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！