Vue component lazy loading three ways and differences

1, vue asynchronous components 2, es6 import lazy loading 3, require.ensure()

const Home = () = > import(/*webpackChunkName:'home'*/'.. /components/home');
const Home1 = () = > import(/*webpackChunkName:'home'*/'.. /components/home1')
const Login = r= > require.ensure([],() = >r(require('.. /components/login'),'login')
new Router({
	routes:[
		{
			name:"index".path:"/index".component:resolve= > require([' '../components/index"], resolve) // Async components generate a js file for each component}, {name:"home", path:"/home", component:Home }, { name:"home1", path:"/home1", Component :Home}, // generate a js file with the same webpackChunkName {name:"login", path:"/login", Component :Login} // third method: similar to the second method but can introduce a separate dependency to generate a js file with the same name]})Copy the code

require.ensure(dependencies: String[].callback: function(require), chunkName: String)
Copy the code

resolve => require([”],resolve) import(/* webpackChunkName:”chunkname */ ”) r => require.ensure([],() => r(require(”)),’chunkname’)