Vue路由的懒加载

使用Vue进行项目开发已经有一段时间了，当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

• 方法一：直接引入 （不推荐）

import ShopcarContainer from './views/Foo.vue';

• 方法二：resolve
  此法实现了按需加载，主要使用了resolve异步加载机制。

const Blank = resolve => require(['@/views/blank.vue'],resolve);

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Const routes=[
{
    path: '/',
    name: 'blank',
    component: Blank,
    meta: {
      title:'',
      }
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

• 方法三：官网方法（import）
  vue-router在官网提供了一种方法，可以理解也是为通过Promise的resolve机制。因为Promise函数返回的Promise为resolve组件本身，而我们又可以使用import来导入组件。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Const routes=[
{
    path: '/',
    name: Foo ,
    component: () => import('@/views/Foo .vue'),
    meta: {
      title:'',
      }
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})