Summary of 3 Ways of vue router Lazy Loading

Lazy loading is not used

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@components/HelloWorld';
Vue.use(Router);
export default new Router({
routes:[
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
]
})

vue asynchronous component

component:resolve= > {reuqire (['Routing Address to Load']), resolve)

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{require(["@/components/HelloWorld"],resolve}
Vue.use(Router);
export default new Router({
routes:[
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
]
})

import () for ES6

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld=()=>import('@/components/HelloWorld');
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})

require. ensure for webpack ()

require. ensure can load resources on demand, including js, css and so on. He will package the require files separately, and will not package them with the main file at the same time.

The first argument is an array, indicating the modules that need to be depended on in the second argument, which will be loaded in advance.

The second is the callback function. In this callback function, the files of require will be packaged into one chunk separately, and will not be packaged with the main file at 1, thus generating two chunk, and only the main file will be loaded at the first load.

The third argument is an error callback.

The fourth parameter is the file name of the individually packaged chunk

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})

Summarize