19.路由懒加载的3种方法
原因:若没有使用路由懒加载,在webpack打包后,打包后的文件会非常大,影响首页加载速度,可能会出现白页。
而运用路由懒加载,当路由被访问的时候才加载对应组件,达到了按需加载,减少了首页的加载时间。
方式一:import按需加载(常用)
export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: () => import('@/components/HelloWorld.vue') } ]
方式二:vue异步组件
export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve => require(['@/components/HelloWorld'], resolve) } ]
方式三:webpack提供的require.ensure()
export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve => require.ensure([], () => resolve(require('@/components/HelloWorld')), 'listDemo') } ]
转载请注明原文链接:https://www.cnblogs.com/chenJieLing/