vue-router in, require instead of import to solve the problem vue Home project load time is too long

vue routing configuration file (routers.js), introduced the general use of the wording import, when the project package all component routes in the city packaged in a js, the project has just entered the home at the time, it will load all the components, so Home lead to load slower, and will load the js when packaged with each component will require a different js, demand loading, access route, so avoid too much time to load content into the home.

require: Run-time calls, in theory can be applied anywhere in the code, import: compile-time call must be placed at the beginning of the file

Example:

import wording:

import userCenter from '@/page/usercenter/index.vue'
export default [
    {
      path: '/userCenter',
      name: 'user-center',
      component: userCenter
    },
    {
      path: '/news/detail',
      name: 'news-detail',
      component: () => import('@/page/news/detail.vue')
    }
]

require written:

export default [
    {
      path: '/userCenter',
      name: 'user-center',
      component: resolve => require(['@/page/userCenter/index.vue'], resolve)
    },
    {
      path: '/news/detail',
      name: 'news-detail',
      component: () => resolve => require(['@/page/news/detail.vue'], resolve)
    }
]