路由懒加载:主要作用就是将路由对应的组件打包成一个个js代码块,只有在这个路由被访问的时候才会加载对应的组件
1.vue异步组件技术----异步加载“
vue-router配置路由,使用vue异步组件技术,可以实现按需加载,但这种情况下组件只生成一个js文件
{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },
2.组件懒加载方案二 路由懒加载(使用import)
1.没有指定webpackChunkName,每个组件打包成一个js文件:import('@/components/Home') 2.指定了相同的webpackChunkName,会合并打包成一个js文件:import(/*webpackChunkName:'hh'*/'@/components/Home') 注*hh是取的名字,打包后只会有这一个js文件 3.直接在外面的暴露Home:path:'/',component:Home
3.webpack提供的require.ensure()
vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') }, { path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') }, 注:r就是resolve