君は心理学者なのか?

大学時代に心理学を専攻しなぜかプログラマになった、サイコ(心理学)プログラマかろてんの雑記。

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が実行され、その際にソースが読み込まれる感じ。

結果

f:id:karoten512:20180511004137g:plain

ログインボタンを押した後、

1.jsというファイルがあとから読み込まれている事が確認できます。

この1.jsにはindexコンポーネントの情報が入っていました。