剛接觸vue-router時(shí)，router中引入視圖方式如下：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/views/index/index'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    }
  ],
  mode:'history'
})

執(zhí)行npm run build，生成的打包文件主要有app,manifest,vendor文件；隨著view的定義越多app文件越大，從而頁(yè)面加載速度變慢

如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了，這里我們采用require,參考資料vue加載異步組件

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

Vue.use(Router)

export default new Router({
 // 這個(gè)特殊的 `require` 語(yǔ)法將會(huì)告訴 webpack
  // 自動(dòng)將你的構(gòu)建代碼切割成多個(gè)包，這些包
  // 會(huì)通過(guò) Ajax 請(qǐng)求加載
  routes: [
    {
      path: '/',
      name: 'index',
      component: resolve => require(['@/views/index/index'], resolve)
    }
  ],
  mode:'history'
})

執(zhí)行npm run build，生成對(duì)應(yīng)打包js文件

index.html頁(yè)面中引入了app,manifest,vendor三個(gè)js文件，沒(méi)有引入0.e6876fdbc6a330b108b8.js文件。這塊應(yīng)該是內(nèi)部處理邏輯了。不難猜測(cè)require一個(gè)view會(huì)生成一個(gè)js文件

// index.html
<script type=text/javascript src=/static/js/manifest.edc5506366fddf27c1f7.js></script>
<script type=text/javascript src=/static/js/vendor.022888f101c69264e9c0.js></script>
<script type=text/javascript src=/static/js/app.5299b921c5b1b290d494.js></script>

在這里我們r(jià)equire2次 “ @/views/searchList/App”，我們知道app，manifest，vendor是會(huì)存在的，那么生成5個(gè)js文件么？然而build后打包構(gòu)建生成4個(gè)文件

    {
      path: '/smSearch',
      name: 'smSearch',
      component: resolve => require(['@/views/searchList/App'], resolve)
    },
    {
      path: '/searchList/:keyword',
      name: 'searchKeyWord',
      component: resolve => require(['@/views/searchList/App'], resolve)
    }

第二種方式：使用import關(guān)鍵字引入,這個(gè)import('XXX')函數(shù)會(huì)返回一個(gè)Promise對(duì)象;參考資料vue-router路由懶加載

{
  path: '/',
  name: 'index',
  component:() => import('@/views/index/index')
 }

據(jù)說(shuō)require.ensure也可以實(shí)現(xiàn)，我在本地試用了沒(méi)有效果 >.< 。代碼貼出來(lái),請(qǐng)大神指教，不管chunkName（第三個(gè)參數(shù)）指定是否同個(gè)字符串。都是生成app，manifest，vendor文件。參考資料require.ensure

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component:resolve => require.ensure([],()=>resolve(require('@/views/index/index')),'demo')
    },
    {
        path:'/groupPurchase',
        name:'groupPurchase',
        component: resolve => require.ensure([],()=>resolve(require('@/views/groupPurchase/App')),'demo')
    }
  ],
  mode:'history'
})