資訊專欄INFORMATION COLUMN
摘要：看看的兼容情況，下圖是上面最新的支持情況兼容情況還是不那么樂觀，不過和安卓陣營已經(jīng)全部支持。我有針對版本做了支持，由于我的指令非常簡單，所以代碼很輕松這樣我的指令就算完成了。只有指令可不行，每次都要自己生成一份格式的圖片，這太不友好了。
本人已經(jīng)使用vue.js半年多了，在做一些Html5頁面的時候發(fā)現(xiàn)很多頁面都是圖片組成的，如果能有效的壓縮圖片的體積那么整個項目體積就會減少很多，這是為什么寫這個簡單東西的起點。
Webp 百度百科上已經(jīng)講清楚在保持原畫質(zhì)的情況呀體積可以壓縮到原來的60%這是很牛逼的一件事?？纯磜ebp的兼容情況，下圖是caniuse上面最新的webp支持情況
兼容情況還是不那么樂觀，不過chrome和安卓陣營已經(jīng)全部支持。所以我還是做了這件事。
Vue.js 的自定義指令系統(tǒng)十分強大是我做這件事的根本原因之一，所以我的設(shè)想是在一個指令中傳入圖片鏈接，然后在頁面渲染的時候根據(jù)瀏覽器是否支持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的時候根據(jù)是否支持然后選擇不同的圖片
function update(el, option) {
var attr = option.arg || "src";
if (el.tagName.toLowerCase() === "img" && option.value) {
el.setAttribute(attr, option.value);
}
};
然而事情的這個時候發(fā)現(xiàn)一些小的圖標(biāo)不見了，原來我的webpack配置中設(shè)置了小于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發(fā)布了。我有針對 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格式的圖片，這太不友好了。我有查找一番，發(fā)現(xiàn)一個webp-loader可以在webpack打包和dev的時候自動生成相應(yīng)的webp文件，太好了。使用原作者的webp-loader發(fā)現(xiàn)文件的hash不一樣，我又用imagemin最新版本升級了一下，上傳到npm叫webpn-loader(原諒我不會命名)，
具體使用方法可以參考我的 Vue.js 2.0 后臺項目 模板項目
謝謝大家，看到這里。歡迎各種star
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86635.html
摘要：功能可以在中根據(jù)圖片類型轉(zhuǎn)換成一份和原圖兩份圖片，并且集成了的功能支持的功能和文件名的功能。還有一些的大家仔細(xì)去讀相關(guān)文檔參考 在上篇Vuejs webp圖片支持，插件開發(fā)過程~ 中我做了一個圖片轉(zhuǎn)換成webp的組件，并且使用了相關(guān)的loader，但是我們在使用過程中發(fā)現(xiàn)webp和原圖的hash是不一樣的，這樣我們就沒有辦法保留版本的概念了，臨時我使用時間戳來作為替代，但是這樣每次上傳...
摘要：要注意老舊的瀏覽器不支持的特性，它會繼續(xù)正常加載屬性引用的圖像。五安全地使用圖片的優(yōu)勢這里不再贅述，簡單來說 這篇文章，我們將一起探討，web應(yīng)用中能對圖片進(jìn)行什么樣的優(yōu)化，以及反思一些負(fù)優(yōu)化手段 一、為什么要對圖片進(jìn)行優(yōu)化 對于大多數(shù)前端工程師來說，圖片就是UI設(shè)計師(或者自己)切好的圖，你要做的只是把圖片丟進(jìn)項目中，然后用以鏈接的方式呈現(xiàn)在頁面上，而且我們也經(jīng)常把精力放在項目的打包...
摘要：寫在前面開發(fā)中的圖像壓縮是一個很重要的部分。而這篇文章會讓我們從另外一個角度來認(rèn)識平臺下的圖像壓縮和優(yōu)化。所以，它是你圖像壓縮和優(yōu)化的首選，盡可能的去使用吧。 寫在前面 Android開發(fā)中的圖像壓縮是一個很重要的部分。而這篇文章會讓我們從另外一個角度來認(rèn)識Android平臺下的圖像壓縮和優(yōu)化。 這篇文章更適合和設(shè)計師一起來看，所以，如果你和你的設(shè)計師是好基友的話，不妨叫上他，倒兩杯咖...
閱讀 1212·2021-11-17 09:33
閱讀 3622·2021-09-28 09:42
閱讀 3352·2021-09-13 10:35
閱讀 2512·2021-09-06 15:00
閱讀 2455·2021-08-27 13:12
閱讀 3619·2021-07-26 23:38
閱讀 1863·2019-08-30 15:55
閱讀 549·2019-08-30 15:53
