vue的路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Recommend=(resolve) => {
	import('components/recommend/recommend').then((module)=>{
		resolve(module);
	})
}
const Singer=(resolve)=>{
	import('components/singer/singer').then((module)=>{
		resolve(module);
	})
}
const Search=(resolve) => {
	import('components/search/search').then((module)=>{
		resolve(module);
	})
}
const Rank=(resolve)=>{
	import('components/rank/rank').then((module)=>{
		resolve(module);
	})
}
const singerDetail=(resolve)=>{
	import('components/singerDetail/singerDetail').then((module)=>{
		resolve(module);
	})
}
const HostList=(resolve)=>{
	import('components/recommend/hostList').then((module)=>{
		resolve(module);
	})
}
const RankList=(resolve)=>{
	import('components/rank/rankList').then((module)=>{
		resolve(module);
	})
}
const routes=[
	{
		path:'/',
		redirect:'/recommend'
		
	},
	{
		path:'/singer',
		component:Singer,
		name:'singer',
		children:[
			{
				path:':id',
				component:singerDetail
			}
		]
	},
	{
		path:'/search',
		component:Search,
		name:'search'
	},
	{
		path:'/rank',
		component:Rank,
		name:'rank',
		children:[
			{
				path:':id',
				component:RankList
			}
		]
	},
	{
		path:'/recommend',
		component:Recommend,
		name:'recommend',
		children:[
			{
				path:':id',
				component:HostList
			}
		]
	},
]

export default routes;