路由懒加载:
运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不利于用户体验
方法:
- vue异步组件
- es提案的import()
- webpack的require.ensure()
1.ES6写法
语法:const 组件名=() => import('组件路径');
const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about')
const router = new Router({
routes: [
{path: '/home', component: Home},
{path: '/index', component: Index},
{path: '/about', component: About}
]
})
2.vue异步组件(AMD写法)
const router = new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/',
component: resolve => require(['../components/common/Home.vue'], resolve),
meta: { title: '自述文件' },
children:[
{
path: '/dashboard',
component: resolve => require(['../components/page/dashboard.vue'], resolve),
meta: { title: '系统首页' }
},
{
path: '/cate',
component: resolve => require(['../components/page/cate.vue'], resolve),
meta: { title: '分类管理' }
},
{
path: '/article',
component: resolve => require(['../components/page/article.vue'], resolve),
meta: { title: '文章管理' }
},
{
path: '/info',
component: resolve => require(['../components/page/info.vue'], resolve),
meta: { title: '博客信息管理' }
},
{
path: '/admin',
component: resolve => require(['../components/page/admin.vue'], resolve),
meta: { title: '管理员管理' }
},
]
},
{
path: '/login',
component: resolve => require(['../components/page/login.vue'], resolve)
},
{
path: '*',
redirect: '/404'
}
]
})
3.webpack提供的require.ensure()
const router = new Router({
routers: [
{
path: '/login',
component: r => require.ensure([], () => r(require('@/components/login/Login')), 'login')
},
{
path: '/home',
component: r => require.ensure([], () => r(require('@/components/home/Home')), 'home')
},
]
})