懶加載也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載，一般的運(yùn)用場(chǎng)景是圖片的懶加載，但vue-router同樣需要懶加載，為什么？因?yàn)橄駐ue這種單頁(yè)面應(yīng)用，如果沒(méi)有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大，造成進(jìn)入首頁(yè)時(shí)，需要加載的內(nèi)容過(guò)多，時(shí)間過(guò)長(zhǎng)，會(huì)出現(xiàn)長(zhǎng)時(shí)間的白屏，即使做了loading也是不利于用戶(hù)體驗(yàn)，而運(yùn)用懶加載則可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力，減少首頁(yè)加載的時(shí)間。

vue-router懶加載的實(shí)現(xiàn)非常簡(jiǎn)單，在配置路由的時(shí)候components從原先的寫(xiě)組件名改為 resolve => require([URL], resolve) 這種格式即可

不使用懶加載寫(xiě)法：

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
    }
  ]
})

使用懶加載寫(xiě)法：

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)
    }
  ]
})