Vuejs webp prend en charge le développement de plug-ins d'images

Cette fois, je vais vous présenter le développement du plug-in Vuejs webp qui prend en charge les images. Quelles sont les précautions pour le développement du plug-in Vuejs webp. Ce qui suit est un cas pratique, prenons. un regard.

J'utilise vue.js depuis plus de six mois lorsque je créais des pages HTML5, j'ai découvert que de nombreuses pages étaient composées d'images. Si la taille des images pouvait être efficacement compressée, la taille des images pouvait être compressée. la taille de l'ensemble du projet serait considérablement réduite. C'est le point de départ de la raison pour laquelle j'ai écrit cette chose simple.

Webp Baidu Encyclopedia a clairement indiqué que le volume peut être compressé à 60 % de l'original tout en conservant la qualité de l'image d'origine. C'est une chose très cool. Jetez un œil à la compatibilité de webp. L'image ci-dessous montre la dernière prise en charge de webp sur caniuse

compatibilité webp

La situation de compatibilité est toujours pas si optimiste, mais les camps Chrome et Android l'ont tous soutenu. Alors je l'ai fait quand même.

Code source github

Le système de commandes personnalisé de Vue.js est très puissant, ce qui est l'une des raisons fondamentales pour lesquelles j'ai fait cela, donc mon idée est de transmettre le lien de l'image dans une commande, puis lors du rendu de la page, sélectionnez quelle image télécharger en fonction du fait que le navigateur prend en charge les images au format webp. Ici, vous devez déterminer si le navigateur prend en charge webp. Ici, j'utilise la méthode canvas, le code est le suivant

.

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;
  }
})();

À l'heure actuelle, la commande est très simple. Lors de la mise à jour, sélectionnez différentes images selon qu'elles sont prises en charge ou non.

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

Cependant, à l'heure actuelle, j'ai constaté que certaines. de petites icônes manquaient. Il s'est avéré que je les avais définies dans la configuration de mon webpack. Les images inférieures à 10k sont codées en base64,
donc mon code final mis à jour est comme ceci

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);
      }
    }
  };

Pour le moment. vue.js 2.0 est sorti. J'ai pris en charge la version 2.0 Comme mes instructions sont très simples, le code est très simple

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() {}
    })
  }
};

De cette façon, mes instructions vue-webp sont complétées.
Des instructions ne suffisent pas. Vous devez à chaque fois générer vous-même une image au format webp, ce qui est trop peu convivial. J'ai fait quelques recherches et trouvé un chargeur webp qui peut générer automatiquement les fichiers webp correspondants pendant l'empaquetage et le développement du webpack, ce qui est génial. J'ai utilisé le webp-loader de l'auteur original et j'ai découvert que le hachage du fichier était différent. Je l'ai mis à niveau avec la dernière version d'imagemin et je l'ai téléchargé sur npm appelé webpn-loader (pardonnez-moi de ne pas le nommer

Je crois avoir lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

connaissances js sur les opérations de nomenclature

expression régulière js 10 exemples d'application

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!