Vue.js実装のWebアプリにlazy loadを導入する

概要

画像が多いVue.js実装のwebアプリに`vue-lazyload`を導入してンダリングタイムの短縮を実施したので、使用したライブラリの紹介をします。

使ったもの

https://github.com/hilongjw/vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.

（これ系では一番スターついてる 2018/05）

インストール

$ npm install vue-lazyload -D

（`-D`は` — save-dev`の省略オプション）

CDNもあります。
https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src=”https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
 Vue.use(VueLazyload)
 …
</script>

組み込み

// main.js
window.Vue = require(‘vue’);
import VueLazyload from ‘vue-lazyload’;
Vue.use(VueLazyload, {
 preLoad: 1.3, // 事前ロードする高さの割合指定
 error: ‘images/error.png’, // エラー時に表示する画像指定
 loading: ‘images/loading.gif’, // ロード中に表示する画像指定
 attempt: 1 // ロード失敗した時のリトライの上限指定
});

Components
遅延ロードしたいimgタグのsrcを以下のように`v-lazy`で指定します。

…
<img v-lazy=”title.image” />
…

表示エリア外の画像はスクロールイベントをフックに表示エリアの高さから必要なコンテンツが読み込まれるようになりました。

まとめ

https://caniuse.com/#search=srcset
srcsetが主要ブラウザでだいたい実装されてretina対応とか要らなくなったみたいにlazy loadもさっさとネイティブで実装されればいいのになーと思います。

vueのコンポーネントシステムが優秀でこういったサードパーティの実装をさくっと組み込めちゃうので立ち上げ期の最適化よりとにかくスピード優先で、出して改善出して改善をやりたいときにはこういった良くできたフレームワークは良い仕事をしてくれるなーと感じました。

以上、Vue.jsアプリに簡単にlazyloadを組み込める`hilongjw/vue-lazyload`の紹介でした。