现在我们页面都是直接导入到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了，大大提高了工作效率，可以向领导申请奖金了（狗头）
