Vue.jsにて、特定のroutingの時に後からComponentを読み込む〜ログイン後にコンポーネントを読み込みたいからLazy Loadしてみた〜
いきさつ
ログイン前はログインコンポーネントだけ、
ログイン後はアプリケーションに必要なコンポーネントを読み込みたい。
目的は、
ログイン前に読み込むJavaScriptソースコードの軽量化と、
それによるセキュリティリスクの減少。
やりかた
はじめ、こんな感じだったとします。
import Vue from 'vue' import Router from 'vue-router' /** ログイン画面で読み込むコンポーネント */ import Login from '@/components/Login' /** ログイン後に読み込みたい(Lazy Load)したいコンポーネント */ import Index from '@/components/Index' Vue.use(Router) export default new Router({ routes: [ { path: '/login', name: 'Login', component: Login }, { path: '/', name: 'index', component: Index } ] })
これを、下のようにするだけです。
import Vue from 'vue' import Router from 'vue-router' /** ログイン画面で読み込むコンポーネント */ import Login from '@/components/Login' /** ログイン後に読み込みたい(Lazy Load)したいコンポーネント */ const Index = function () { return import('@/components/index') } // 後は同じ
importとreturn importの違いですが、
import Index from '@/components/Index'
とすると、Indexにはオブジェクトが入り、
const Index = function () { return import('@/components/index') }
とすると、__webpack_requireという関数が入るようです。
ログイン後webpack_requireが実行され、その際にソースが読み込まれる感じ。
結果
ログインボタンを押した後、
1.jsというファイルがあとから読み込まれている事が確認できます。
この1.jsにはindexコンポーネントの情報が入っていました。