introduce

In large-scale vue projects, many routing page references of. vue files are involved. However, if import is used, all components in the route will be packed in a js when the project is packaged, resulting in too much content to load when entering the home page and relatively long time. When you use the method shown in the article to configure the routing page, your components will be packaged into different JSS, which will be loaded on demand, only when you visit the routing URL.
You can see the directory structure when you pack.

Implementation of vue require method

rout = {
				mode:'hash',
			    routes: [
			        {
			            path: '/',
			            redirect: '/Main',
			        },
			        {
			            path: '/',
			             component: resolve => require(['Components/page/Header/Home.vue'], resolve),
			            meta: { title: 'Readme file' },
			            children:[
			                {
			                    path: '/Main',
			                    component: resolve => require([`../components/page/${comp}.vue`], resolve),
			                    name:"Main",
			                    meta: { 
			                    	title: 'System home page' ,
			                    //	permission: true
			                    },
			                },
							{
			                    path: '/Messages',
			                    name:"Messages",
			                    component: resolve => require(['Components/page/Admin/Messages.vue')], resolve),
			                    meta: { title: 'Message center' }
			                },
			                {
			                    path: '/404',
			                    component: resolve => require(['Components/common/vue/404.vue')], resolve),
			                    meta: { title: '404' }
			                },
			                {
			                    path: '/403',
			                    component: resolve => require(['Components/common/vue/403.vue')], resolve),
			                    meta: { title: '403' }
			                },
			            ]
			        },
			        {
			            path: '/login',
			            component: resolve => require(['Components/page/Login.vue')], resolve),
			        },
			        {
			            path: '*',
			            redirect: '/404'
			        }
			    ]
			}

Go to directory

Using wabpack ensure to realize

rout = {
				mode:'hash',
			    routes: [
			        {
			            path: '/',
			            redirect: '/Main',
			        },
			        {
			            path: '/',
			            component:r => require.ensure( [], () => r (require('Components/page/Header/Home.vue'))),
			            meta: { title: 'Readme file' },
			            children:[
			                {
			                    path: '/Main',
			                    component:r => require.ensure( [], () => r (require(`../components/page/${comp}.vue`))),
			                    name:"Main",
			                    meta: { 
			                    	title: 'System home page' ,
			                    //	permission: true
			                    },
			                },
							{
			                    path: '/Messages',
			                    name:"Messages",
			                    component:r => require.ensure( [], () => r (require('Components/page/Admin/Messages.vue'))),
			                    meta: { title: 'Message center' }
			                },
			                {
			                    path: '/404',
			                    component:r => require.ensure( [], () => r (require('Components/common/vue/404.vue'))),
			                    meta: { title: '404' }
			                },
			                {
			                    path: '/403',
			                    component:r => require.ensure( [], () => r (require('Components/common/vue/403.vue'))),
			                    meta: { title: '403' }
			                },
			            ]
			        },
			        {
			            path: '/login',
			            component:r => require.ensure( [], () => r (require('Components/page/Login.vue'))),
			        },
			        {
			            path: '*',
			            redirect: '/404'
			        }
			    ]
			}

Note: if the project generated by Vue cli is used, it is recommended to use webpack, which is feasible to test

Go to directory