Vuejs webp圖片支持，插件開發過程~

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

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

兼容狀況仍是不那麼樂觀，不過chrome和安卓陣營已經所有支持。因此我仍是作了這件事。

源碼github

Vue.js 的自定義指令系統十分強大是我作這件事的根本緣由之一，因此個人設想是在一個指令中傳入圖片連接，而後在頁面渲染的時候根據瀏覽器是否支持webp格式的圖片選擇下載那個圖片，這裏就須要判斷瀏覽器是否支持webp了，這裏我用到的是canvas方法，代碼以下

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

這時候就很是簡單了指令在update的時候根據是否支持而後選擇不一樣的圖片

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

然而事情的這個時候發現一些小的圖標不見了，原來個人webpack配置中設置了小於10k的圖片使用base64編碼，
因此最終個人更新代碼是這樣的

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

    }
  };

這個時候vue.js 2.0發佈了。我有針對 2.0版本作了支持，因爲個人指令很是簡單，因此代碼很輕鬆

var isVueNext = Vue.version.split('.')[0] === '2';
  if (isVueNext) {
    Vue.directive('webp', function(el, binding) {
      update(el, {
        arg: binding.arg,
        value: binding.value
      });
    })
  } else {
    Vue.directive('webp', {
      bind: function() {},
      update: function(val, old) {
        update(this.el, {
          arg: this.arg,
          value: val
        });
      },
      unbind: function() {}
    })
  }
};

這樣個人vue-webp指令就算完成了。
只有指令可不行，每次都要本身生成一份webp格式的圖片，這太不友好了。我有查找一番，發現一個webp-loader能夠在webpack打包和dev的時候自動生成相應的webp文件，太好了。使用原做者的webp-loader發現文件的hash不同，我又用imagemin最新版本升級了一下，上傳到npm叫webpn-loader(原諒我不會命名)，
具體使用方法能夠參考個人 Vue.js 2.0 後臺項目 模板項目

謝謝你們，看到這裏。歡迎各類star