本人已经使用vue.js半年多了，在作一些Html5页面的时候发现不少页面都是图片组成的，若是能有效的压缩图片的体积那么整个项目体积就会减小不少，这是为何写这个简单东西的起点。vue

Webp 百度百科上已经讲清楚在保持原画质的状况呀体积能够压缩到原来的60%这是很牛逼的一件事。看看webp的兼容状况，下图是caniuse上面最新的webp支持状况webpack

兼容状况仍是不那么乐观，不过chrome和安卓阵营已经所有支持。因此我仍是作了这件事。git

Vue.js 的自定义指令系统十分强大是我作这件事的根本缘由之一，因此个人设想是在一个指令中传入图片连接，而后在页面渲染的时候根据浏览器是否支持webp格式的图片选择下载那个图片，这里就须要判断浏览器是否支持webp了，这里我用到的是canvas方法，代码以下github

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的时候根据是否支持而后选择不一样的图片web

function update(el, option) {

var attr = option.arg || 'src';

if (el.tagName.toLowerCase() === 'img' && option.value) {

el.setAttribute(attr, option.value);

}

};

然而事情的这个时候发现一些小的图标不见了，原来个人webpack配置中设置了小于10k的图片使用base64编码，

因此最终个人更新代码是这样的chrome

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版本作了支持，因为个人指令很是简单，因此代码很轻松npm

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 后台项目 模板项目canvas

谢谢你们，看到这里。欢迎各类star浏览器