前言

首先，說下什麼是懶載入，懶載入也叫延遲載入，即在需要的時候進行載入，隨用隨載，一般的運用場景是圖片的懶載入，但vue-router同樣需要懶載入，為什麼？因為像vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，時間過長，會出現長時間的白屏，即使做了loading也是不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入的時間。

實現

vue-router懶載入的實現非常簡單，在配置路由的時候components從原先的寫元件名改為 resolve => require([URL], resolve) 

不使用懶載入寫法：

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Parent',
      component: Parent
    }
  ]
})

使用懶載入寫法：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Parent',
      component: resolve => require(['@/components/Parent'], resolve)
    }
  ]
})