[vue-router4快速入门] 4.路由懒加载

现在我们页面都是直接导入到rouer.js中，

import index from './views/index' 
import list from './views/list' 
import userDetail from './views/userDetail'

这样所有页面的代码都会打包进来，
比如说我要进首页时，用户列表页的代码也需要加载进来，这显然很不合理，
在实际工作中我们也不会这么做，
那么就需要我们这节课的主角，路由懒加载
其实改动很简单
我们把这些import都先去掉
然后用import函数的方式把页面加载进来

const routes = [
  {
    path: '/',
    component: () =>import('./views/index'), // 修改
    name: 'index',
    meta: {
      title: '首页',
      keepAlive: true,
    },
  },
  {
    path: '/list',
    component: () =>import('./views/list'), // 修改
    name: 'list',
    meta: {
      title: '用户列表',
      keepAlive: true,
    },
  },
  {
    path: '/userDetail/:id',
    component: () =>import('./views/userDetail'), // 修改
    name: 'userDetail',
    meta: {
      title: '用户详情',
      keepAlive: true,
    },
  },
]

这样webpack就会帮我们处理好打包优化，其他的就不用我们操心了
这么写还有一个很大的好处，新增页面时，我们不用在顶部多写一个import了，大大提高了工作效率，可以向领导申请奖金了（狗头）