Summary of 3 ways to lazy load vue-router

Not using lazy loading

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(['The routing address to be loaded']),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
	}
]
})

ES6 import()

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
	}
	}]
})

webpack's require.ensure()

require.ensure can load resources on demand, including js, css, etc. It will package the required files separately and will not package them together with the main file.

The first parameter is an array, indicating the modules required by the second parameter, which will be loaded in advance.

The second is the callback function. In this callback function, the required file will be packaged into a separate chunk and will not be packaged together with the main file. In this way, two chunks are generated. Only the main file is loaded during the first load.

The third parameter is the error callback.

The fourth parameter is the file name of the separately 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

This concludes this article about the three ways of lazy loading of vue-router. For more relevant content on lazy loading of vue-router, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!