vue-router 异步组件 按需加载

刚接触vue-router时，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'
})

执行npm run build，生成的打包文件主要有app,manifest,vendor文件；随着view的定义越多app文件越大，从而页面加载速度变慢

---

Chunk Names	Size
app.b8ab3a48bde7b3e6e94c.js	227KB
manifest.3a87fa67b93a7a61bbff.js	1.41KB
vendor.157a7bf99b19dbb4a259.js	325KB

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了，这里我们采用require,参考资料vue加载异步组件

---

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

Vue.use(Router)

export default new Router({
 // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  routes: [
    {
      path: '/',
      name: 'index',
      component: resolve => require(['@/views/index/index'], resolve)
    }
  ],
  mode:'history'
})

执行npm run build，生成对应打包js文件

Chunk Names	Size
0.e6876fdbc6a330b108b8.js	323KB
app.5299b921c5b1b290d494.js	41.1KB
manifest.edc5506366fddf27c1f7.js	1.49KB
vendor.022888f101c69264e9c0.js	218KB

index.html页面中引入了app,manifest,vendor三个js文件，没有引入0.e6876fdbc6a330b108b8.js文件。这块应该是内部处理逻辑了。不难猜测require一个view会生成一个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>

---

在这里我们require2次 “ @/views/searchList/App”，我们知道app，manifest，vendor是会存在的，那么生成5个js文件么？然而build后打包构建生成4个文件

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

---

第二种方式：使用import关键字引入,这个import('XXX')函数会返回一个Promise对象;参考资料vue-router路由懒加载

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

---

据说require.ensure也可以实现，我在本地试用了没有效果 >.< 。代码贴出来,请大神指教，不管chunkName（第三个参数）指定是否同个字符串。都是生成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'
})