【Vue.js】遅延ローディングとvue-cli3のprefetchの仕組み

はじめに

仕事で使う事になったので1からVue.jsについて学んだ。
ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。

遅延ローディングとvue-cli3のprefetchの仕組み

遅延ローディング

SPAのパフォーマンスを向上させるために、あるコンポーネントが必要になった時にそれをロードするようにする事。

何で遅延ローディングの仕組みがあるか？

routerで定義しているコンポーネントが増えていき、実際には特定の操作をする時のみしか使わないコンポーネントも出てくる。
その時、デフォルトのvue-routerでは、SPAのコンポーネント全てをロードする仕組みになっており、折角ロードしてもそれを使わない事もあるという状況になる。
すると、パフォーマンスとして非効率な状態になる。。。
→（だったら）必要な時に、必要なコンポーネントだけをロードすればいい！という考え方

遅延ローディングの実装

遅延ローディングの実装はWebpackの機能を使って以下のように実装する。

import Vue from "vue";
import Router from "vue-router";

// 普通のimport
// import Home from "./views/Home.vue";
// import Users from "./views/User.vue";
// import UserPosts from "./views/UsersPosts.vue";
// import UsersProfile from "./views/UsersProfile.vue";
// import HeaderHome from "./views/HeaderHome.vue";
// import HeaderUsers from "./views/HeaderUsers.vue";

// 遅延ローディングのimport
const Home = () => import(/* webpackChunkName: "Home" */ "./views/Home.vue");
const Users = () => import(/* webpackChunkName: "Users" */ "./views/User.vue");
const UserPosts = () => import(/* webpackChunkName: "UserPosts" */ "./views/UsersPosts.vue");
const UsersProfile = () => import(/* webpackChunkName: "UsersProfile" */ "./views/UsersProfile.vue");
const HeaderHome = () => import(/* webpackChunkName: "HeaderHome" */ "./views/HeaderHome.vue");
const HeaderUsers = () => import(/* webpackChunkName: "HeaderUsers" */ "./views/HeaderUsers.vue");

vue-cli3を使っている時の遅延ローディングの特徴的な挙動

vue-cli3を使ている場合、prefetchという仕組みが自動的に機能するようになっている。

• prefetch
  今後必要になるコンポーネントのリストを全てHTMLのheadにlinkとして定義し、ユーザ操作などがない時に裏で自動的にそれらのコンポーネントをロードする仕組み
  裏で持ってきたコンポーネント(JavaScriptファイル)はprefetch cacheに保持され、実際に必要になったらそのcacheから読み込むようになっている。

このprefetchが生まれた経緯としては、

• （元々SPAでは）ページ遷移時にコンポーネントなどのHTML・JavaScriptなどを取得する必要がないので高速に動く
• が、遅延ローディングをすると、ページ遷移時にコンポーネントをロードするのでその分遅くなってしまう
• かといって最初に全部持ってくるわけにもいかない・・・
• それならば、今後必要になるコンポーネントを暇な時に自動的に持ってきて、それをキャッシュしておけばいい

という感じ。

どのような挙動になるか、実際に見てみると以下の動画の通りで、prefetch cacheとなっているのがcacheから持ってきている部分。

※今回は"/"にアクセスした後、コンピュータ上は暇と見なせる時間があり、その時に全てのJSファイルがロードされているのでNetworkで全部JSファイルがロードされているのが表示されている。

動画のソースコード全体は以下。

Vue.jsの勉強メモ一覧記事へのリンク

Vue.jsについて勉強した際に書いた勉強メモ記事のリンクを集約した記事。