Vue项目使用vue的resolve异步组件实现懒加载路由

在很多项目中，我们都会看到这样的代码

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。

具体的可以在打包的时候，看看目录结构就明了了。