在很多项目中，我们都会看到这样的代码
routes: [
{
// 进行路由配置,规定'/'引入到home组件
path: '/',
component: resolve => require(['../pages/home.vue'], resolve),
meta: {
title: 'home'
}
},
{
path: '/msg',
component: Msg
},
{
path: '/detail',
component: Detail,
children: [
{
path: 'msg',
component: Msg
}
]
}
]
在构建路由配置的时候，没有采用传统的做法那样 import 组件，而是在单个路由设置时，使用 require 导入组件。
component: resolve => require(['../pages/home'], resolve)
原因很简单，像使用 vue.js 这样实现的单页面应用，如果使用 import 引入组件不使用懒加载的话，当项目打包时路由里的所有 component 都会打包在一个 js 中，导致打包文件过大。从而造成进入首页时，需要加载的内容过多，时间相对比较长。
当使用 resolve 懒加载方式则可以将页面进行划分，webpack 打包时会将 component 分别打包成不同的js。只有访问这个路由网址时才会加载这个js。
具体的可以在打包的时候，看看目录结构就明了了。
