Vuejs WebP は画像プラグイン開発をサポートします

今回は、画像をサポートする Vuejs webp のプラグイン開発についてお届けします。Vuejs webp プラグイン開発の 注意点 は何ですか?実際の事例を見てみましょう。

私は半年以上 vue.js を使ってきましたが、HTML5 ページをいくつか作成していたときに、画像のサイズを効果的に圧縮できれば、多くのページが画像で構成されていることがわかりました。プロジェクトが大幅に削減されるため、これを簡単なものの出発点として書きました。

Webp Baidu Encyclopedia は、元の画質を維持したまま、ボリュームを元の 60% に圧縮できることを明らかにしました。これは非常に素晴らしいことです。 webp の互換性を見てください。下の図は caniuse での webp の互換性を示しています。webp の互換性はまだ楽観的ではありませんが、Chrome と Android 陣営はすでにサポートしています。それでとにかくやりました。

ソース コード github

Vue.js のカスタム コマンド システムは非常に強力です。これが私がこれを行った根本的な理由の 1 つです。そのため、私のアイデアはコマンドで画像リンクを渡し、それに従って参照することです。ページのレンダリング時間にブラウザが 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;
  }
})();

それは非常に簡単です。現時点では、コマンドはサポートされているかどうかに応じて更新され、別の画像を選択します

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 || &#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.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形式の画像を生成する必要があり、不親切すぎます。いくつか調査したところ、Webpack のパッケージ化と開発中に対応する WebP ファイルを自動的に生成できる WebP ローダーを見つけました。これは素晴らしいものです。オリジナルの作成者の webp-loader を使用したところ、ファイルのハッシュが異なることがわかり、imagemin の最新バージョンでアップグレードし、webpn-loader という名前の npm にアップロードしました (名前を付けていないことをお詫びします)。この記事の事例を読んで方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

BOM操作に関するjsの知識集

js正規表現の応用例10選

以上がVuejs WebP は画像プラグイン開発をサポートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。