vue cli: lazy loadって？やっておいたほうがいい理由＆やり方を解説

備忘録です。

vue cliでは、vue-routerを使うことで、いとも簡単にpathがつくれます。
つまりabout, contact, infoなど、プロジェクト内にいくつかページを設定したいときに、

blog.jp/about
blog.jp/contact
blog.jp/info

とそれぞれのリンクをつくれるようになります。

vue cliでプロジェクトを作成するときにvue-routerを含むよう設定しておけば、routerというフォルダが自動的に作成され、そのなかにあるindex.jsからrouterの作成・編集が行えるようになります。この記事はvue-routerについてではないので、細かいところは割愛します。

（vue-routerのドキュメントは、ここから確認できます）

vue-routerで新たなpathをつくる際にlazy loadを設定しておかないと、ウェブサイトを開いたときにウェブサイト全体で使われる全てのJSが一斉に読み込まれてしまいます。

なぜlazy loadするべきか

一見、「別にいいじゃん」と思うかもしれません。ところがページが重い場合、「ページに必要となるJSを全部ロードしてからページを開く」なんてことをしていると、ページの動作が鈍くなりかねません。

lazy loadであれば、ユーザーがページにクリックした際に、そのページのJSファイルがロードされるよう設定ができます。なので、サイトにアクセスした瞬間から重すぎてページがロードしない、なんて事態を防げます。そうすることで、ユーザーはページ内をスイスイ回遊することができます。

方法

たとえばAboutというページがあるとします。
まずはlazy loadをしなかった場合のコードを見てみましょう。
About.vueは、通常通りimport About from〜というコードでimportされています。

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";//ここでAbout.vueをインポート

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about", //パスをつくる
    name: "About", //vueファイル内でアクセスできる名前をつける
  }
];

一方でlazy loadをした場合は、routesのなかにあるcomponentというプロパティを通して、About.vueをインポートします。

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";//ここでAbout.vueをインポートしない


Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about", //パスをつくる
    name: "About", //vueファイル内でアクセスできる名前をつける
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")　// ここでlazy loadをしている！
  }
];

componentを定義することで、ページが呼び出されたときにだけ、About.vueが読み込まれるようになります。

ちなみに/* webpackChunkName: "about" */これはなんぞや？と思うかもしれません。

lazy loadのコードを書いたあと、Chrome Developer Tools👉networkを開き、Aboutのページをクリックしてみると、app.jsとは別に0.jsというファイルがロードされていることが確認できるかと思います。つまりwebpackChunkNameを設定しないと、デフォルトとして数字でファイル名が登録されてしまうのです。

about.jsとわかりやすく表示できるよう、/* webpackChunkName: "about" */を付け加えておきましょう。

vue.jsの公式ドキュメントにも記載されています。

以上です👋